@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">Outlet Requisition Request</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

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

                            @csrf

                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <label for="reqDate" class="col-sm-4 col-form-label">Date: <span
                                                    class="text-danger"> * </span></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="reqDate" id="reqDate"
                                                        value="{{ $date }}" 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('reqDate')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror

                                            </div>
                                        </div>

                                    </div>

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

                                        <div class="form-group row">
                                            <label for="outlet" class="col-sm-4 col-form-label">Outlet: <span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-8">

                                                <select id="outlet" name="outlet" class="form-control form-control-sm"
                                                    value="{{ old('outlet') }}" style="width: 100%;" required>

                                                    <option value="">Select Outlet</option>

                                                    @foreach ($outlet as $v)
                                                        <option value="{{ $v->id }}"
                                                            {{ $v->id == auth()->user()->outlet_id ? 'selected' : '' }}>
                                                            {{ $v->outlet_name }}</option>
                                                    @endforeach


                                                </select>

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

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">

                                        <div class="form-group row">
                                            <label for="req_invoice" class="col-sm-4 col-form-label">Invoice No: <span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-8">
                                                <input id="req_invoice" type="text" name="req_invoice"
                                                    class="form-control form-control-sm" value="{{ $invoice }}"
                                                    style="width: 100%;" readonly required>

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

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

                                </div>


                                

                                <div class="row">

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

                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th style="width: 10px">Sl</th>
                                                    <th style="width:200px">Product</th>
                                                    <th>Quantity(stock : <span id="cur_stock"></span>)</th>
                                                    <th>Unit</th>
                                                    <th>Rate</th>
                                                    <th>Amount</th>
                                                    <th style="width:90px;">Action</th>
                                                </tr>

                                                <tr>
                                                    <th>#</th>
                                                    <th style="width:200px">

                                                        <select id="product_id" name="product_id"
                                                            class="form-control form-control-sm myselect2"
                                                            style="width: 100%;">

                                                            <option value="">Select Product</option>
                                                            {{-- @foreach ($products as $v)
                                                                <option value="{{ $v->id }}"
                                                                    data-lastprice="{{ $v->sale_price }}"
                                                                    data-pname="{{ $v->product_name }}"
                                                                    data-unitid="{{ $v->unit_id }}"
                                                                    data-unit="{{ $v->unit_name }}"
                                                                    data-pur="{{ $v->pur_price }}"
                                                                    data-reciid="{{ $v->recipe_id }}"
                                                                    data-prodqty="{{ $v->prod_qty }}"
                                                                    data-productId="{{ $v->product_id }}"
                                                                    data-stock="{{ $v->balanceinhand }}">
                                                                    {{ $v->product_name }}-({{ $v->product_code }})
                                                                </option>
                                                            @endforeach --}}

                                                        </select>

                                                    </th>

                                                    <th>
                                                        <input type="number" id="quantity"
                                                            class="form-control form-control-sm quantity" value=""
                                                            placeholder="Quantity">
                                                    </th>
                                                    <th>
                                                        <p id="unitname"></p>
                                                    </th>
                                                    <th>
                                                        <input type="number" id="rate"
                                                            class="form-control form-control-sm rate" value=""
                                                            placeholder="Rate" disabled>
                                                    </th>

                                                    <th>
                                                        <input type="text" id="total"
                                                            class="form-control form-control-sm total" value=""
                                                            placeholder="Amount" disabled>
                                                    </th>
                                                    <th>
                                                        <button type="button" id="add_row"
                                                            class="btn btn-info btn-sm">Add</button>

                                                        <button id="btn_looding" class="btn btn-info btn-sm"
                                                            type="button" disabled="">
                                                            <span class="spinner-grow spinner-grow-sm" role="status"
                                                                aria-hidden="true"></span>
                                                            <span class="sr-only">Loading...</span>
                                                        </button>

                                                    </th>
                                                </tr>


                                            </thead>

                                            <tbody id="req_rows">

                                            </tbody>

                                            <tfoot>

                                                <tr>
                                                    <td style="padding-top: 35px;" colspan="4">
                                                        <div class="form-group row">
                                                            <label for="description"
                                                                class="col-sm-4 col-form-label">Requisition Note:</label>
                                                            <div class="col-sm-8">

                                                                <textarea class="form-control" id="description" rows="3" name="description" placeholder="Note"
                                                                    style="height: 70px;"></textarea>

                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td colspan="2"></td>
                                                </tr>
                                            </tfoot>

                                        </table>

                                    </div>


                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">

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

                                </div>

                        </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">


        $(window).on('load', function() {

            setTimeout(() => {

                $("#outlet").trigger("change");
                
            }, 1000);


        });

        
        $(function() {

            $('#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();
            });


            $("#userform").on("click", ".edit_row", function() {

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


                    var product_id = $(this).data("pid");

                    var quantity = $(this).data("quantity");
                    var price = $(this).data("price");
                    var total = $(this).data("total");

                    total = parseFloat(total).toFixed(3);

                    var unitname = $(this).data("unitname");
                    var pname = $(this).data("pname");

                    $('#product_id').val(product_id).trigger('change');

                    $("#quantity").val(quantity);
                    $("#price").val(price);
                    $("#total").val(total);
                    $("#unitname2").html(unitname);


                }
            });

            $("#userform").on("click", ".delete_row", function() {

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

                    if (confirm('Are you sure To delete this record?')) {

                        var product_id = $(this).data("pid");

                        var route = '{{ route('inventory.delReciRow') }}';

                        $.post(route, {
                                "product_id": product_id
                            })
                            .done(function(data) {

                                $("#req_rows").html(data);
                                console.log(data);

                            })
                            .fail(function() {
                                alert("error");
                            });



                    } else {
                        return false;
                    }




                }
            });


            function addRow(product_id, req_qty, price, total, unit_name, pname, unitid, reqDate, outlet,
                description, req_invoice) {


                $("#add_row").hide();
                $("#btn_looding").show();

                var route = '{{ route('inventory.addReciRow') }}';


                $.post(route, {
                        "product_id": product_id,
                        "req_qty": req_qty,
                        "price": price,
                        "total": total,
                        "unit_name": unit_name,
                        "pname": pname,
                        "unitid": unitid,
                        "reqDate": reqDate,
                        "outlet": outlet,
                        "description": description,
                        "req_invoice": req_invoice
                    })
                    .done(function(data) {

                        $("#req_rows").html(data);

                        $("#rate").val('');
                        $("#quantity").val('');
                        $("#total").val('');
                        $("#product_id").val('');

                        setTimeout(function() {

                            $("#add_row").show();
                            $("#btn_looding").hide();

                        }, 1000);


                        $('#product_id').val('').trigger('change');


                    })
                    .fail(function() {

                        $("#add_row").show();
                        $("#btn_looding").hide();


                        alert("error");
                    });


            }

            function checkValid(number) {
                console.log(number);
                if (+number <= 0) {

                    return true;

                }

                return false;
            }

            $("#add_row").click(function(e) {

                e.preventDefault();

                if ($("#product_id").val()) {

                    if ($("#quantity").val()) {

                        if ($("#rate").val()) {

                            var unitid = $("#product_id").find(':selected').data('unitid');

                            // var product_id = $("#product_id").find(':selected').data('productId');

                            var unit_name = $("#product_id").find(':selected').data('unit');
                            var pname = $("#product_id").find(':selected').data('pname');
                            var reciid = $("#product_id").find(':selected').data('reciid');
                            var prodqty = $("#product_id").find(':selected').data('prodqty');

                            var product_id = $("#product_id").val();

                            var req_qty = $("#quantity").val();
                            var price = $("#rate").val();
                            var outlet = $("#outlet").val();
                            var reqDate = $("#reqDate").val();
                            var description = $("#description").val();
                            var req_invoice = $("#req_invoice").val();


                            var checkQty = checkValid(req_qty);

                            if (checkQty) {
                                alert("Please enter valid number");

                                $("#quantity").val('')

                                return false;
                            }

                            var checkPrice = checkValid(price);

                            if (checkPrice) {
                                alert("Please enter valid number");

                                $("#rate").val('')

                                return false;
                            }


                            if ($("#total").val()) {

                                var total = $("#total").val();

                                total = parseFloat(total).toFixed(3);

                            } else {
                                var total = 0;
                                alert("Total Amount Not Empty!");
                                return false;
                            }


                            var addrow = addRow(product_id, req_qty, price, total, unit_name, pname, unitid,
                                reqDate, outlet, description, req_invoice);

                        } else {

                            alert("Enter Rate!");
                            return false;
                        }

                    } else {
                        alert("Enter Quantity!");
                        return false;

                    }

                } else {
                    alert("Select Product!");
                    return false;
                }
            });


            $("#quantity").keyup(function() {

                var product_id = $("#product_id").val();

                if (!product_id) {
                    $("#quantity").val(0);
                    $("#rate").val(0);
                    alert("Select Product!");
                    return false;
                }

                if ($("#quantity").val()) {
                    var quantity = $("#quantity").val();
                    if (quantity <= 0) {
                        alert("Please, Enter Posetive Number!");
                        $("#quantity").val('');
                    }
                } else {
                    var quantity = 0;
                }

                if ($("#rate").val()) {
                    var price = $("#rate").val();
                } else {
                    var price = 0;
                }

                if (quantity && price) {
                    var total = quantity * price;

                    total = parseFloat(total).toFixed(3);

                    $("#total").val(total);


                } else {

                    var total = 0;


                    $("#total").val(total);
                }
            });


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

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

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

                    var url = '{{ route('response.finalproduct', ':id') }}';
                    url = url.replace(':id', outlet_id);

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

                            if (!data) {
                                console.log('No found!');
                            }
                        })
                        .done(function(data) {
                            $("#product_id").html(data.rows);
                        })
                        .fail(function() {

                        })
                        .always(function() {

                        });
                }


            });

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

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

                    var product_id = $(this).val();

                    var unitid = $(this).find(':selected').data('unitid');
                    var product_id = $(this).find(':selected').data('productId');
                    var unit_name = $(this).find(':selected').data('unit');
                    var pur_price = $(this).find(':selected').data('pur');
                    var stock = $(this).find(':selected').data('stock');

                    $("#cur_stock").html(stock);

                    var lastprice = $(this).find(':selected').data('lastprice');

                    $("#rate").val(lastprice);
                    $("#unitname").html(unit_name);
                    $("#quantity").focus();

                } else {

                    $("#rate").val('');

                    $("#unitname").html('');

                }


            });

        });
    </script>
@endpush