@extends('layouts.app')
@section('title', __('lang_v1.product_stock_history'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('lang_v1.product_stock_history')</h1>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
    <div class="col-md-12">
    @component('components.widget', ['title' => $product->name])
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('product_id',  __('sale.product') . ':') !!}
                {!! Form::select('product_id', [$product->id=>$product->name], $product->id, ['class' => 'form-control', 'style' => 'width:100%']); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('location_id',  __('purchase.business_location') . ':') !!}
                {!! Form::select('location_id', $business_locations, request()->input('location_id', null), ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('stock_id',  __('stock.stock') . ':') !!}
                {!! Form::select('stock_id', ['' => 'Selected'] + $stocks, request()->input('stock_id', null), ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
            </div>
        </div>
        {{-- <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('date_range_value', __('report.date_range') . ':') !!}
                {!! Form::text('date_range_value', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
            </div>
        </div> --}}
        @if($product->type == 'variable')
            <div class="col-md-3">
                <div class="form-group">
                    <label for="variation_id">@lang('product.variations'):</label>
                    <select class="select2 form-control" name="variation_id" id="variation_id">
                        @foreach($product->variations as $variation)
                            <option value="{{$variation->id}}"
                            @if(request()->input('variation_id', null) == $variation->id)
                                selected
                            @endif
                            >{{$variation->product_variation->name}} - {{$variation->name}} ({{$variation->sub_sku}})</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @else
            <input type="hidden" id="variation_id" name="variation_id" value="{{$product->variations->first()->id}}">
        @endif
    @endcomponent
    @component('components.widget')
        <div id="product_stock_history" style="display: none;"></div>
    @endcomponent
    </div>
</div>

</section>
<!-- /.content -->
@endsection

@section('javascript')
   <script type="text/javascript">
        $(document).ready( function(){
            //Date range as a button
            $('#date_range_value').daterangepicker(
                dateRangeSettings,
                function(start, end) {
                    $('#date_range_value').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                }
            );

            load_stock_history($('#variation_id').val(), $('#location_id').val(), $('#stock_id').val(), $('#date_range_value').val(), $('#product_id').val());
            get_stocks($('#location_id').val());

            $('#product_id').select2({
                ajax: {
                    url: '/products/list-no-variation',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term, // search term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                },
                minimumInputLength: 0,
                escapeMarkup: function(m) {
                    return m;
                },
            }).on('select2:select', function (e) {
                var data = e.params.data;
                window.location.href = "{{url('/')}}/products/stock-history/" + data.id
            });
        });

        $(document).on('change', '#location_id', function() {
            var location_id = $(this).val();
            get_stocks(location_id)
        });

        function get_stocks(location_id){
            $('#stock_id').empty();
            $('#stock_id').append('<option value="">Please Select</option>');        
            url = window.location.origin + '/getStocks';
            var stock_id = "{{ request()->input('stock_id', null) }}";

            $.ajax({
                method: 'GET',
                url: url,
                dataType: 'json',
                data:{location_id:location_id},
                success: function(result) {
                    // Ensure the result is an object and loop through stocks
                    if (result!=0) {
                        $.each(result, function(id, name){
                            var selected = (stock_id == id) ? 'selected' : '';
                            $('#stock_id').append('<option value="' + id + '" '+selected+'>' + name + '</option>');
                        });
                    } else {
                        console.error('Invalid data format received:', result);
                    }
                },
            });
        }

       function load_stock_history(variation_id, location_id, stock_id, date_range_value, product_id) {
           $('#product_stock_history').fadeOut();

            $.ajax({
                url: '/products/stock-history/' + variation_id + "?location_id=" + location_id,
                dataType: 'html',
                data:{
                    product_id:product_id,
                    stock_id:stock_id,
                    date_range_value:date_range_value,
                },
                success: function(result) {
                    
                    $('#product_stock_history')
                        .html(result)
                        .fadeIn();

                    __currency_convert_recursively($('#product_stock_history'));

                    $('#stock_history_table').DataTable({
                        searching: false,
                        fixedHeader:false,
                        ordering: false
                    });
                },
            });
       }

       $(document).on('change', '#variation_id, #location_id, #stock_id, #date_range_value, #product_id', function(){
            load_stock_history($('#variation_id').val(), $('#location_id').val(), $('#stock_id').val(), $('#date_range_value').val(), $('#product_id').val());
       });
   </script>
@endsection