@extends('admin.master')

@section('title', 'Stockin vs Stockout')

@section('contents')
    <!-- row -->
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">Filter Report (StockIn vs StockOut)</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date From <small>mm/dd/yyyy</small></label>
                                <input type="date" value="" class="form-control" id="dateFrom">
                                <span id="errDateFrom" style="color:red;display: none;">This field must fill up</span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date To <small>mm/dd/yyyy</small></label>
                                <input type="date" value="" class="form-control" id="dateTo">
                                <span id="errDateTo" style="color:red;display: none;">This field must fill up</span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Purchased & Sold By</label>
                                <select id="actionBy" class="form-control">
                                    <option value="all">All employees</option>
                                    @foreach($employees  as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->emp_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group"><br>
                                <div class="mt-2">
                                    <button type="button" id="searchBy" class="btn btn-info">Search</button>
                                    <button type="button" id="resetBy" class="btn btn-warning ml-5">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-widget widget-user">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="widget-user-header bg-white" style="height:auto !important;">
                    <h4 class="widget-user-username">Summary: Stockin vs Stockout</h4>
                    <hr>
                    <p class="p-0 m-0">
                        Date From: &nbsp;<strong><span id="smDateFrom"></span></strong>&nbsp;&nbsp;&nbsp;
                        Date To:&nbsp;<strong><span id="smDateTo"></span></strong>&nbsp;&nbsp;&nbsp;
                        Purchased & Sold By: &nbsp;<strong><span id="smactionBy"></span></strong>
                    </p>
                </div>
                <div class="overlay" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt"></i>
                </div>
                <div class="card-footer" style="padding-top: 0;padding-bottom: 0;">
                    <div class="row">
                        <div class="col-sm-3 border-right bg-success">
                            <div class="description-block">
                                <h5 id="show_total_stock_in_qty" class="description-header" style="font-size: 30px;">0</h5>
                                <span class="description-text">TOTAL STOCK-IN QTY</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-3 border-right bg-warning">
                            <div class="description-block">
                                <h5 id="show_total_sold_qty" class="description-header" style="font-size: 30px;">0</h5>
                                <span class="description-text">TOTAL SOLD QTY</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-3 border-right bg-secondary">
                            <div class="description-block">
                                <h5 id="show_total_purchased_amount" class="description-header" style="font-size: 30px;">0</h5>
                                <span class="description-text">TOTAL PURCHASED AMOUNT({{$settings->currency_symbol}})</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-3 bg-info">
                            <div class="description-block">
                                <h5 id="show_total_sold_amount" class="description-header" style="font-size: 30px;">00.0</h5>
                                <span class="description-text">TOTAL SOLD AMOUNT({{$settings->currency_symbol}})</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        StockIn vs StockOut
                    </h3>
                    <a href="{{ url('/reports/stockin_vs_stockout/print/all') }}" target="_blank" id="prindBy" class="btn btn-success float-right">Print</a>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                    <div class="dataTables_wrapper dt-bootstrap4">
                        <table id="products" class="table table-sm table-striped table-bordered table-hover dataTable" style="width: 100%" role="grid" aria-describedby="products">
                            <thead>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Emp. Name</th>
                                <th>Designation</th>
                                <th>Phone</th>
                                <th>StockIn Qty</th>
                                <th>StockOut Qty</th>
                                <th>Purchased Total({{$settings->currency_symbol}})</th>
                                <th>Sold Total({{$settings->currency_symbol}})</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Emp. Name</th>
                                <th>Designation</th>
                                <th>Phone</th>
                                <th>StockIn Qty</th>
                                <th>StockOut Qty</th>
                                <th>Purchased Total({{$settings->currency_symbol}})</th>
                                <th>Sold Total({{$settings->currency_symbol}})</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="overlay" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt"></i>
                </div>
            </div>
            <!-- /.card -->

        </div>
    </div>
    <!-- /.row -->
@endsection

@section('script_links')
    <script>
        @foreach(['success','error'] as $type)
        @if(Session::has('msg-'.$type))
        toastr.{{ $type }}('{{ Session::get('msg-'.$type) }}');
        @endif
        @endforeach

        $(function() {
            // active left-menu
            // for tree addClass .menu-open
            // for submenu addClass .active
            $('#menu_reports').addClass('menu-open');
            $('#sub_stockin_vs_stockout').addClass('active');

            var dateFrom = $('#dateFrom').val();
            var dateTo = $('#dateTo').val();
            var actionByID = $("#actionBy").val();
            var actionBy = $("#actionBy option:selected").text();
            var print_url = "";

            load_data(dateFrom,dateTo,actionByID,actionBy);

            var table = $("#products").DataTable({
                            initComplete: function () {
                                $('#products_filter label input').focus();
                            },
                            pageLength: 25,
                            processing: true,
                            serverSide: true,
                            ajax:{
                                url: "{{ url('/reports/stockin_vs_stockout') }}",
                                data: {
                                    dateFrom: function() { return $('#dateFrom').val() },
                                    dateTo : function() { return $('#dateTo').val() },
                                    actionBy: function() { return $('#actionBy').val() }
                                }

                            },
                            columns:[
                                {
                                    data: 'DT_RowIndex',
                                    name: 'DT_RowIndex'
                                },
                                {
                                    data: 'emp_name',
                                    name: 'emp_name'
                                },
                                {
                                    data: 'emp_designation',
                                    name: 'emp_designation'
                                },
                                {
                                    data: 'emp_phone',
                                    name: 'emp_phone'
                                },
                                {
                                    data: 'stockin_qty',
                                    name: 'stockin_qty',
                                    render: function(data,type,full,meta){
                                        if(data === null || data == 0){
                                            data = 0;
                                            return `<span style='color:red;'>${data}</span>`;
                                        } else if(data < 0){
                                            return `<span style='color:red;'>${data}</span>`;
                                        } else {
                                            return data;
                                        }
                                    },
                                },
                                {
                                    data: 'sold_qty',
                                    name: 'sold_qty',
                                    render: function(data,type,full,meta){
                                        if(data === null || data == 0){
                                            data = 0;
                                            return `<span style='color:red;'>${data}</span>`;
                                        } else if(data < 0){
                                            return `<span style='color:red;'>${data}</span>`;
                                        } else {
                                            return data;
                                        }
                                    },
                                },
                                {
                                    data: 'stockin_total',
                                    name: 'stockin_total',
                                    render: function(data,type,full,meta){
                                        var price = numeral(data).format('0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'sold_total',
                                    name: 'sold_total',
                                    render: function(data,type,full,meta){
                                        var price = numeral(data).format('0,0.00');
                                        return price;
                                    },
                                }
                            ]
                        });

            $("#searchBy").click(function () {
                dateFrom = $('#dateFrom').val();
                dateTo = $('#dateTo').val();
                actionByID = $("#actionBy").val();
                actionBy = $("#actionBy option:selected").text();

                if(dateFrom != "" && dateTo == ""){
                    $('#errDateTo').show();
                } else if(dateFrom == "" && dateTo != ""){
                    $('#errDateFrom').show();
                } else {
                    if(dateFrom != "" && dateTo != ""){
                        print_url = '{{ url('/reports/stockin_vs_stockout/print/') }}/'+actionByID+"/"+dateFrom+"/"+dateTo;
                    } else {
                        print_url = '{{ url('/reports/stockin_vs_stockout/print/') }}/'+actionByID;
                    }
                    $("#prindBy").attr('href',print_url);
                    $('#errDateFrom').hide();
                    $('#errDateTo').hide();
                    load_data(dateFrom,dateTo,actionByID,actionBy);
                    table.ajax.reload();
                }
            });

            $("#resetBy").click(function () {
                $('#dateFrom').val("");
                $('#dateTo').val("");
                $('#actionBy').val("all");
                $('#errDateFrom').hide();
                $('#errDateTo').hide();
                table.ajax.reload();
            });

            function load_data(dateFrom,dateTo,actionByID,actionBy){
                $.ajax({
                    method: "POST",
                    url: "{{ url('/get_stockin_vs_stockout_summary') }}",
                    data: { _token: "{{ csrf_token() }}", dateFrom: dateFrom, dateTo: dateTo, actionBy:actionByID },
                    beforeSend: function() {
                        $(".overlay").show();
                    },
                    complete: function(){
                        $(".overlay").hide();
                    },
                    success: function(data) {
                        data = JSON.parse(data);
                        $("#smDateFrom").text(dateFrom);
                        $('#smDateTo').text(dateTo);
                        $("#smactionBy").text(actionBy);
                        $('#show_total_stock_in_qty').text(data[0].total_stock_in_qty);
                        $('#show_total_purchased_amount').text(numeral(data[0].total_stockin_total).format('0,0.00'));
                        $('#show_total_sold_qty').text(data[0].total_sold_qty);
                        $('#show_total_sold_amount').text(numeral(data[0].total_sold_total).format('0,0.00'));
                    }
                })
            }


        });
    </script>
@endsection