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

@section('content')

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

<!-- Main content -->
<section class="content no-print">
    <div class="row">
        <div class="col-md-12">
            @component('components.filters', ['title' => __('report.filters')])
              {!! Form::open(['url' => action([\App\Http\Controllers\ReportController::class, 'getOpeningStock']), 'method' => 'get', 'id' => 'opening_stock_report_filter_form' ]) !!}
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('product_id', __('lang.product') . ':') !!}
                        {!! Form::select('product_id', $products, null, ['placeholder' => __('messages.all'), 'class' => 'form-control select2', '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, null, ['id' => 'location_id', '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', [], null, ['id' => 'stock_id', 'class' => 'form-control select2', 'style' => 'width:100%']); !!}
                    </div>
                </div>
                {!! Form::close() !!}
            @endcomponent
        </div>
    </div>

    @component('components.widget', ['class' => 'box-primary', 'title' => __('report.opening_stock_report')])  
        <div class="table-responsive">
            <table class="table table-bordered table-striped ajax_view" id="opening_stock_table">
                <thead>
                    <tr>
                        <th>@lang('messages.date')</th>
                        <th>@lang('lang.product')</th>
                        <th>@lang('lang.location')</th>
                        <th>@lang('lang.stock')</th>
                        <th>@lang('lang.quantity')</th>
                        <th>@lang('lang.price')</th>
                        <th>@lang('lang.notes')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th colspan="4" style="text-align:center">@lang('lang.total'):</th>
                        <th id="footer_quantity"></th>
                        <th id="footer_price"></th>
                        <th></th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    @endcomponent
</section>

<section id="receipt_section" class="print_section"></section>

<!-- /.content -->
@stop
@section('javascript')
	<script>
        opening_stock_table = $('#opening_stock_table').DataTable({
            processing: true,
            serverSide: true,
            fixedHeader:false,
            aaSorting: [[0, 'desc']],
            ajax: {
                url: '/reports/get-opening-stock',
                data: function(d) {
                    d.product_id = $('#product_id').val();
                    d.location_id = $('#location_id').val();
                    d.stock_id = $('#stock_id').val();
                }
            },
            columnDefs: [
                {
                    targets: 7,
                    orderable: false,
                    searchable: false,
                },
            ],
            columns: [
                { data: 'transaction_date', name: 'transaction_date' },
                { data: 'product', name: 'product' },
                { data: 'location', name: 'location' },
                { data: 'stock', name: 'stock' },
                { data: 'quantity', name: 'quantity' },
                { data: 'final_total', name: 'price' },
                { data: 'additional_notes', name: 'additional_notes' },
                { data: 'action', name: 'action' },
            ],
            fnDrawCallback: function(oSettings) {
                __currency_convert_recursively($('#opening_stock_table'));
            },
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();

                // Helper function to remove formatting and parse float
                var parseValue = function(i) {
                    return typeof i === 'string'
                        ? parseFloat(i.replace(/[\$,]/g, '')) || 0
                        : typeof i === 'number'
                        ? i
                        : 0;
                };

                // Calculate total quantity
                var totalQty = api
                    .column(4, { page: 'current' })
                    .data()
                    .reduce(function(a, b) {
                        return parseValue(a) + parseValue(b);
                    }, 0);

                // Calculate total price
                var totalPrice = api
                    .column(5, { page: 'current' })
                    .data()
                    .reduce(function(a, b) {
                        return parseValue(a) + parseValue(b);
                    }, 0);

                // Update footer
                $('#footer_quantity').html(totalQty);
                $('#footer_price').html(__currency_trans_from_en(totalPrice, true));
            }
        });

        // Trigger table reload on filter change
        $('#opening_stock_report_filter_form select').change(function () {
            opening_stock_table.ajax.reload();
        });
        
        $('select#location_id').on('change', function(e) {
            $('#stock_id').empty();
            $('#stock_id').append('<option value="">Please Select</option>');        
            url = window.location.origin + '/getStocks';

            $.ajax({
                method: 'GET',
                url: url,
                dataType: 'json',
                data:{location_id:$(this).val()},
                success: function(result) {
                    // Ensure the result is an object and loop through stocks
                    if (result !== null) {
                        let isFirst = true;
                        $.each(result, function(id, name) {
                            if (isFirst) {
                                $('#stock_id').val(id); // set the first id
                                isFirst = false; // mark that first iteration is done
                            }
                            $('#stock_id').append('<option value="' + id + '">' + name + '</option>');
                        });
                    } else {
                        console.error('Invalid data format received:', result);
                    }
                },
            });
        });
    </script>
@endsection

@cannot('view_purchase_price')
    <style>
        .show_price_with_permission {
            display: none !important;
        }
    </style>
@endcannot