@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">Purchase Voucher Entry</h3>

                        <a href="{{ route('purchase.index') }}" style="float: right;padding: 3px 26px;"
                            class="btn btn-outline-dark btn-flat">Purchase List</a>

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

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

                        @csrf

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group row" style="display: none">
                                                <label for="purDate" class="col-sm-4 col-form-label">Entry 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="purDate" id="purDate"
                                                            value="{{ $date }}" placeholder="Enter Date" />
                                                        <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('purDate')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                    @enderror

                                                </div>
                                            </div>


                                            <div class="form-group row">

                                                <input type="hidden" id="supplier_id" value="" name="supplier_id"
                                                    required>

                                                <label for="supplier_id2" class="col-sm-4 col-form-label">Supplier:
                                                    <span class="text-danger"> * </span></label>
                                                <div class="col-sm-8">

                                                    <select id="supplier_id2" name="supplier_id2"
                                                        class="form-control form-control-sm select2"
                                                        value="{{ old('supplier_id2') }}" style="width: 100%;">
                                                        <option value="">Select Suppliers</option>
                                                        @foreach ($suppliers as $v)
                                                        <option value="{{ $v->id }}"
                                                            {{ old('supplier_id2') == $v->id ? 'selected' : '' }}>
                                                            {{ $v->supplier_name }}
                                                        </option>
                                                        @endforeach

                                                    </select>

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

                                                </div>
                                            </div>


                                            <div class="form-group row" style="display:none;">

                                                <label for="pur_type" class="col-sm-4 col-form-label">Purchase Type
                                                    <span class="text-danger"> * </span></label>
                                                <div class="col-sm-8">

                                                    <select id="pur_type" name="pur_type"
                                                        class="form-control form-control-sm select2" value="{{ old('pur_type') }}" style="width: 100%;">
                                                        <option value="0" selected> Local Purchase </option>
                                                        <option value="1"> Import </option>

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

                                                </div>
                                            </div>



                                        </div>

                                        <div class="col-sm-6">


                                            <div class="form-group row">
                                                <label for="billDate" class="col-sm-4 col-form-label">Pur. Date: <span
                                                        class="text-danger"> * </span></label>
                                                <div class="col-sm-8">

                                                    <div class="input-group date" id="reservationdate2"
                                                        data-target-input="nearest">
                                                        <input type="text"
                                                            class="form-control form-control-sm datetimepicker-input"
                                                            data-target="#reservationdate2" name="billDate"
                                                            id="billDate" value="{{ old('billDate') }}"
                                                            placeholder="Bill Date" required />
                                                        <div class="input-group-append" data-target="#reservationdate2"
                                                            data-toggle="datetimepicker">
                                                            <div class="input-group-text"><i class="fa fa-calendar"></i>
                                                            </div>
                                                        </div>
                                                    </div>


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

                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="billNo" class="col-sm-4 col-form-label">Bill NO: <span
                                                        class="text-danger"> * </span></label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="billNo" id="billNo" value="{{ old('billNo') }}"
                                                        placeholder="Enter Bill No" required>

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

                                                </div>
                                            </div>


                                            <!-- <div class="form-group row">
                                                          <label class="col-sm-4 col-form-label">Supplier Name: </label>
                                                          <div class="col-sm-8">
                                                            <p id="supplier_name"></p>

                                                          </div>
                                                        </div>

                                                        <div class="form-group row">
                                                          <label class="col-sm-4 col-form-label">Mobile:</label>
                                                          <div class="col-sm-8">

                                                            <p id="supplier_mobile"></p>

                                                          </div>
                                                        </div>

                                                        <div class="form-group row">
                                                          <label class="col-sm-4 col-form-label">Address:</label>
                                                          <div class="col-sm-8">

                                                            <p id="supplier_address"></p>

                                                          </div>
                                                        </div> -->


                                        </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>Qty (stock : <span id="cur_stock"></span>)</th>
                                                <th>Unit</th>
                                                <th>Rate</th>
                                                <th>Tax(%)</th>
                                                <th>Tax Amount</th>
                                                <th>Amount</th>
                                                <th style="width:90px;">Action</th>
                                            </tr>


                                            <tr>
                                                <th>1</th>
                                                <th style="width:200px">
                                                    <!--    <input type="text" id="product_name" class="form-control form-control-sm product_name" value="" placeholder="Product Name"> -->

                                                    <select id="product_name" name="product_name"
                                                        class="form-control form-control-sm myselect2"
                                                        style="width: 100%;">
                                                        <option value="">Select Product</option>
                                                    </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">
                                                </th>
                                                <th>
                                                    <input type="number" id="tax_rate"
                                                        class="form-control form-control-sm tax_rate" value=""
                                                        placeholder="Tax(%)">
                                                </th>
                                                <th>
                                                    <input type="text" id="tax_amt"
                                                        class="form-control form-control-sm tax_amt" value=""
                                                        placeholder="Tax Amount" readonly>
                                                </th>
                                                <th>
                                                    <input type="text" id="total"
                                                        class="form-control form-control-sm total" value=""
                                                        placeholder="Amount" readonly>
                                                </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="pur_rows">

                                        </tbody>

                                        <tfoot>

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

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

                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="padding-top: 35px;" colspan="4">
                                                    <div class="form-group row">
                                                        <label for="transport_cost"
                                                            class="col-sm-4 col-form-label text-right">Transport
                                                            Cost:</label>
                                                        <div class="col-sm-8">
                                                            <input type="text" class="form-control"
                                                                name="transport_cost" id="transport_cost"
                                                                placeholder="Transpore Cost..">
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">

                                <button type="submit" class="btn btn-primary">Submit</button>
                                <a href="{{ route('purchase.create') }}" class="btn btn-secondary">Clear All</a>

                            </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">
    $(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 taxrate = $(this).data("taxrate");
                var taxamt = $(this).data("taxamt");
                var total = $(this).data("total");
                var unitname = $(this).data("unitname");
                var pname = $(this).data("pname");

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

                $("#quantity").val(quantity);
                $("#price").val(price);
                $("#tax_rate").val(taxrate);
                $("#tax_amt").val(taxamt);

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


                $("#total").val(total);
                $("#unitname").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('response.delpurrow') }}";

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

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

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

                } else {
                    return false;
                }

            }
        });


        function addRow(product_id, quantity, price, tax_rate, tax_amt, total, unit_name, pname) {

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

            var route = "{{ route('response.addpurrow') }}";

            $.post(route, {
                    "product_id": product_id,
                    "quantity": quantity,
                    "price": price,
                    "tax_rate": tax_rate,
                    "tax_amt": tax_amt,
                    "total": total,
                    "unit_name": unit_name,
                    "pname": pname
                })
                .done(function(data) {

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

                    setTimeout(function() {

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

                    }, 1000);

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

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

                })
                .fail(function() {

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


                    alert("error");
                });

        }


        function checkValid(number) {

            if (+number <= 0) {

                return true;

            }

            return false;
        }


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

            e.preventDefault();

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

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

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


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

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

                        var checkQty = checkValid(quantity);

                        if (checkQty) {
                            alert("Please enter vàlid number");
                            $("#quantity").val('');
                            return false;
                        }

                        var price = $("#rate").val();
                        var checkPrice = checkValid(price);

                        if (checkPrice) {
                            alert("Please enter vàlid number");
                            $("#rate").val('');
                            return false;
                        }

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

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

                        } else {
                            var tax_rate = 0;
                        }

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

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

                        } else {
                            var tax_amt = 0;
                        }

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

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

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

                        var addrow = addRow(product_id, quantity, price, tax_rate, tax_amt, total,
                            unit_name, pname);

                    } else {

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

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

                }

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

        });

        $("#quantity,#rate,#tax_rate").keyup(function() {

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

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


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


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

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


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

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

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

                    if (+tax_rate > 0) {

                        var vdiv = (tax_rate / 100) + 1;

                    } else {

                        var vdiv = (tax_rate / 100) + 1;
                    }

                    var tax_amt = total / vdiv;
                    tax_amt = total - tax_amt;
                    tax_amt = parseFloat(tax_amt).toFixed(3);

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

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

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

                } else {

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

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


            } else {

                var total = 0;


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

        });

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

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

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

                var unitid = $(this).find(':selected').data('unitid');
                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);

                $("#unitname").html(unit_name);
                $("#unit_id").val(unitid);
                $("#rate").val(pur_price);

            }

            $("#quantity").val('');
            $("#tax_rate").val('');
            $("#total").val('');

        });


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


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

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

                $("#supplier_id").val(sup_id);

                var sel = this;

                var url = "{{ route('response.supplierinfo', ':id') }}";
                url = url.replace(':id', sup_id);

                var jqxhr = $.get(url, function(data) {
                        if (!data) {
                            alert('No supplier found!');
                        }
                    })
                    .done(function(data) {

                        var suppliers = data.suppliers;
                        var rows = data.rows;

                        var supplier_name = suppliers.supplier_name;
                        var supplier_mobile = suppliers.contact_no;
                        var supplier_address = suppliers.address;

                        $("#supplier_name").html(supplier_name);
                        $("#supplier_mobile").html(supplier_mobile);
                        $("#supplier_address").html(supplier_address);

                        $("#product_name").html(rows);

                        $(sel).attr('disabled', true);

                    })
                    .fail(function() {
                        $("#supplier_id").val('');

                    })
                    .always(function() {

                    });

            } else {
                $("#supplier_id").val('');
            }

        });

    });
</script>
@endpush