@extends('layouts.admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

<style>
    div.form-group {
        margin-bottom: 3px;
    }

    #unitname {
        position: relative;
        top: 11px;
    }

    #btn_looding {
        display: none;
    }
</style>
@endpush

@section('content')
<!-- Main content -->
<section class="content">
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- left column -->
            <div class="col-md-12">
                <!-- jquery validation -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Dispatch</h3>

                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->

                    <div class="card-body">
                        <form id="userform" class="form-horizontal" method="GET"
                            action="{{ route('inventory.dispatch') }}">
                            @csrf
                            <div class="row">

                                <div class="col-md-3">
                                    <div class="form-group row">
                                        <label for="reciDate" class="col-sm-4 col-form-label">Date </label>
                                        <div class="col-sm-8">
                                            <div class="input-group date" id="reservationdate"
                                                data-target-input="nearest">
                                                <input type="text"
                                                    class="form-control form-control-sm datetimepicker-input"
                                                    data-target="#reservationdate" name="reciDate" id="reciDate"
                                                    value="{{ $reciDate }}" placeholder="Enter Date" required />
                                                <div class="input-group-append" data-target="#reservationdate"
                                                    data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>

                                            @error('reciDate')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-4 d-none">

                                    <div class="form-group row">
                                        <label for="outlet_id" class="col-sm-4 col-form-label">Outlet </label>
                                        <div class="col-sm-8">

                                            <select id="outlet_id" name="outlet_id"
                                                class="form-control form-control-sm" style="width: 100%;">
                                                <option value="">Select Outlet</option>
                                                @foreach ($outlet as $v)
                                                <option value="{{ $v->id }}" {{ $v->id == 2 ? 'selected' : '' }}> {{ $v->outlet_name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-4 d-none">

                                    <div class="form-group row">
                                        <label for="req_invoice" class="col-sm-4 col-form-label">Invoice </label>
                                        <div class="col-sm-8">

                                            <select id="req_invoice" name="req_invoice"
                                                class="form-control form-control-sm" style="width: 100%;">
                                                <option value="">Select Invoice</option>

                                            </select>

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-1">
                                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                                </div>
                            </div>
                        </form>

                        <form id="userform2" class="form-horizontal" method="POST"
                            action="{{ route('inventory.dispatchdata') }}">

                            @csrf

                            <div class="row">

                                <div class="col-md-12">

                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th style="width: 10px">Sl</th>
                                                <th>Date</th>
                                                <th>Invoice</th>
                                                <th>Product</th>
                                                <th>Unit</th>
                                                <th>Req.Qty</th>
                                                <th>Prev. Recieve</th>
                                                <th>Pen. Qty</th>
                                                <th>Des. Qty</th>
                                                <th>Cur. Stock</th>
                                                <th>Outlet</th>
                                            </tr>

                                        </thead>

                                        <tbody>
                                            @php
                                            $sl = 1;

                                            @endphp
                                            @foreach ($products as $pro)
                                            @php
                                            if ($pro->req_qty == $pro->rcv_qty) {
                                            continue;
                                            }
                                            $req_date = date('d-m-Y', strtotime($pro->req_date));


                                            $curStock = $pro->dept_curstock;


                                            $pending = $pro->req_qty - $pro->rcv_qty;

                                            @endphp

                                            <tr>
                                                <td>{{ $sl++ }}</td>
                                                <td><input class="reqQty form-control form-control-sm"
                                                        style="width: 70px;text-align:center;height:25px;"
                                                        type="text" name="req_date" value="{{ $req_date }}"
                                                        readonly></td>
                                                <td>{{ $pro->req_invoice }}</td>
                                                <td>{{ $pro->product_name }}</td>
                                                <td>{{ $pro->unit_name }}</td>

                                                <td><input class="reqQty form-control form-control-sm"
                                                        style="width: 60px;text-align:center;height:25px;"
                                                        type="text" name="reqQty[]" value="{{ $pro->req_qty }}"
                                                        readonly></td>

                                                <td><input class="prevRcv form-control form-control-sm"
                                                        style="width: 60px;text-align:center;height:25px;"
                                                        type="text" name="prevRcv[]" value="{{ $pro->rcv_qty }}"
                                                        readonly></td>

                                                <td>{{ $pending }}</td>

                                                <td><input
                                                        class="receiveQty form-control form-control-sm"
                                                        type="number"
                                                        step="any"
                                                        name="receiveQty[]"
                                                        data-toggle="tooltip"
                                                        title="Enter dispatch qty. Press Tab for next. Must not exceed stock or pending."
                                                        data-curstock="{{ $curStock }}"
                                                        data-req="{{ $pro->req_qty }}"
                                                        data-reqpending="{{ $pending }}"></td>

                                                <td>{{ $curStock }}</td>

                                                <td>{{ $pro->outlet_name }}</td>


                                                <input class="prndingQty form-control form-control-sm"
                                                    type="hidden" name="prndingQty[]"
                                                    value="{{ $pro->pend_qty }}" readonly>
                                                <input type="hidden" name="req_id[]"
                                                    value="{{ $pro->id }}">
                                                <input type="hidden" name="product_id[]"
                                                    value="{{ $pro->product_id }}">
                                                <input type="hidden" name="outlet_id[]"
                                                    value="{{ $pro->outlet_id }}">
                                                <input type="hidden" name="category_id[]"
                                                    value="{{ $pro->category_id }}">
                                                <input type="hidden" name="pur_price[]"
                                                    value="{{ $pro->pur_price }}">
                                                <input type="hidden" name="user_id[]"
                                                    value="{{ $pro->user_id }}">
                                            </tr>
                                            @endforeach
                                        </tbody>

                                        <tfoot>

                                    </table>

                                </div>


                            </div>
                            <!-- /.card-body -->

                            @if (auth()->user()->outlet_id == 1)
                            <div class="card-footer">

                                <button type="submit" class="btn btn-primary">Dispatch</button>

                            </div>
                            @endif


                        </form>

                    </div>
                    <!-- /.card -->
                </div>
                <!--/.col (left) -->
                <!-- right column -->
                <div class="col-md-6">

                </div>
                <!--/.col (right) -->
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

@push('scripts')
<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>
<script type="text/javascript">
    function loadInvoice(outlet_id) {

        var url = "{{ route('inventory.reqinvs', ':id') }}";
        url = url.replace(':id', outlet_id);

        var jqxhr = $.get(url, function() {


            })
            .done(function(data) {

                if (data.data) {

                    $('#req_invoice').html('');

                    $('#req_invoice').append($('<option></option>').val('').html(
                        'Select Invoice'));

                    data.data.forEach((item) => {

                        $('#req_invoice').append($('<option></option>').val(item
                            .req_invoice).html(item.req_invoice));


                    });

                }

            })
            .fail(function() {

                console.log("error");

            });

    }

    $(function() {

        var outlet_id = $("#outlet_id").val();
        if (outlet_id) {
            loadInvoice(outlet_id);
        }

        $("#outlet_id").change(function() {

            if ($(this).val()) {

                var outlet_id = $(this).val();
                loadInvoice(outlet_id);

            } else {

            }

        });

        $(".receiveQty").keyup(function() {

            let thissel = this;

            if ($(".reqQty").val() && $(this).val()) {

                let reqQty = $(this).data("req");
                let pendingQty = $(this).data("reqpending");


                if ($(this).data("curstock")) {

                    let curstock = $(this).data("curstock");
                    let rcvQty = $(this).val();

                    if (+rcvQty > +curstock) {

                        alert('Despatch quantity cannot be greater than current stock.');
                        $(thissel).val('');
                        return false;

                    }

                    if ($(this).data("reqpending")) {

                        if (+rcvQty > +pendingQty) {

                            alert('Despatch quantity cannot be greater than pending quantity..');
                            $(thissel).val('');
                            return false;

                        }

                    } else {

                        if (+rcvQty > +curstock) {

                            alert('Despatch quantity cannot be greater than current stock..');
                            $(thissel).val('');
                            return false;

                        }


                    }



                    if ((+rcvQty > +reqQty) || (+rcvQty < 0)) {

                        alert('Please Enter Valid Amount!');

                        $(this).parent('td').parent('tr').find('.receiveQty').val('');
                        $(this).parent('td').parent('tr').find('.prndingQty').val('');
                        return false;

                    } else {
                        if (pendingQty > 0) {

                            if ((+pendingQty < +rcvQty) || (+pendingQty < 0)) {

                                alert('Please Enter Valid Amount!');
                                $(this).parent('td').parent('tr').find('.prndingQty').val(pendingQty);
                                $(this).parent('td').parent('tr').find('.receiveQty').val('');
                                return false;

                            } else {
                                var pending = pendingQty - rcvQty;
                                $(this).parent('td').parent('tr').find('.prndingQty').val(pending);
                            }

                        } else {
                            var pending = reqQty - rcvQty;
                            $(this).parent('td').parent('tr').find('.prndingQty').val(pending);
                        }

                    }


                } else {
                    alert('Stock Empty!');
                    $(thissel).val('');
                    return false;
                }




            }


        });

        $('#reservationdate').datetimepicker({
            format: 'DD-MM-YYYY'
        });

        $('#reservationdate2').datetimepicker({
            format: 'DD-MM-YYYY'
        });


        //Initialize Select2 Elements
        $('.select2').select2();
        $('.myselect2').select2();

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })



        $(document).on('select2:open', () => {
            document.querySelector('.select2-search__field').focus();
        });


    });

    $(document).on('keydown', '.receiveQty', function(e) {
        let inputs = $('.receiveQty');
        let index = inputs.index(this);

        if (e.key === "Tab") {
            e.preventDefault();

            if (e.shiftKey) {
                // backward
                if (index > 0) {
                    inputs.eq(index - 1).focus();
                }
            } else {
                // forward
                if (index + 1 < inputs.length) {
                    inputs.eq(index + 1).focus();
                }
            }
        }
    });

    $(document).on('focus', '.receiveQty', function() {
        $(this).select();
    });
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
        let firstInput = $('.receiveQty').filter(':visible').first();

        if (firstInput.length) {
            firstInput.focus().select();
        }
    });
</script>
@endpush