@extends('layouts.backend')

@section('title', 'Import Bill')

@section('breadcrumb', (isset($title) ? $title : 'No Title'))

@section('content')

<form method="POST" action="{{ route('stock-save-import') }}" id="form_product_material" >

@block(trans("stockbill.bill_detail"))
    @if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
        {!! HTMLRender::formText('bill_no', $d->bill_no, trans('stock.bill_no') . trans('lang.field_required')) !!}
        {{-- {!! HTMLRender::formText('supplier_name', $d->supplier_name, trans('stock.supplier_name')) !!} --}}
        {!! HTMLRender::formSelect('supplier_id', trans('stock.supplier_name'), $suppliers, $d->supplier_id, ['span' => false, 'select2' => true, 'firstrow' => true]) !!}
        {!! HTMLRender::formRadio('vat_type', 'VAT. Type', [
            VAT_NOVAT => trans('lang.vat_type_' . VAT_NOVAT),
            VAT_EXCLUDE => trans('lang.vat_type_' . VAT_EXCLUDE),
            VAT_INCLUDE => trans('lang.vat_type_' . VAT_INCLUDE)
        ], $d->vat_type); !!}
        {!! HTMLRender::formHidden('id', $d->id) !!}
        @if(!empty($d->reject_reason))
        {!! HTMLRender::formLabel(trans('stockbill.reject_reason'), $d->reject_reason) !!}
        @endif
        <div class="form-group row">
            <div class="col-sm-9 ml-auto">
                <button type="button" id="btn-save" class="btn btn-outline btn-primary btn-save">Submit</button>
                <a href="{{ route('supplier-create', ['redirect_url' => route('stock-import')]) }}" class="btn btn-outline btn-info">สร้าง Supplier ใหม่</a>
            </div>
        </div>
    @else
        {!! HTMLRender::formLabel(trans('stockbill.bill_no'), $d->bill_no) !!}
        {!! HTMLRender::formLabel(trans('stockbill.supplier_name'), $d->supplier_name) !!}
    @endif

@endblock

@if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
@block(trans("stock.add_block"))

    {!! HTMLRender::formErrors() !!}

    {!! HTMLRender::formSelect('material_id_add', trans('stock.material'), $materials) !!}
    {!! HTMLRender::formNumber('amount', null, trans('stock.amount') . trans('lang.field_required')) !!}
    {!! HTMLRender::formNumber('price', null, trans('stock.price') . trans('lang.field_required')) !!}
    {!! HTMLRender::formText('remark', null, trans('stock.remark')) !!}
    {!! HTMLRender::button('btn-add', 'btn-add', trans('stock.add')) !!}

    {{ csrf_field() }}

@endblock
@endif

@block(trans("stock.transaction"))
<div id="table-stock-add" >
<table class="table table-striped table-bordered table-vcenter" >
    <thead class="thead-light" >
        <tr>
            <th>{{ trans('stock.material_name') }}</th>
            <th>{{ trans('stock.amount') }}</th>
            <th>{{ trans('stock.unit_price') }}</th>
            <th>{{ trans('stock.price_exc_vat') }}</th>
            <th>{{ trans('stock.vat') }}</th>
            <th>{{ trans('stock.price_inc_vat') }}</th>
            <th>{{ trans('stock.remark') }}</th>
            @if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
            <th>{{ trans('lang.delete') }}</th>
            @endif
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, index) in list" >
            <td>@{{ item.material_name }}</td>
            <td>@{{ item.amount }}</td>
            <td>@{{ item.unit_price }}</td>
            <td>@{{ item.price_exc_vat }}</td>
            <td>@{{ item.vat }}</td>
            <td>@{{ item.price_inc_vat }}</td>
            <td>@{{ item.remark }}</td>
            @if(in_array($d->status, [STATUS_INACTIVE, STATUS_DELETE]))
            <td><button type="button" class="btn btn-sm btn-danger btn-del-row" v-bind:data-index="index" >{{ trans('lang.delete') }}</button></td>
            @endif
            <input type="hidden" name="material_id[]" v-bind:value="item.material_id" >
            <input type="hidden" name="amount[]" v-bind:value="item.amount" >
            <input type="hidden" name="price[]" v-bind:value="item.price_exc_vat" >
            <input type="hidden" name="unit_price[]" v-bind:value="item.unit_price" >
            <input type="hidden" name="total[]" v-bind:value="item.price_inc_vat" >
            <input type="hidden" name="vat[]" v-bind:value="item.vat" >
            <input type="hidden" name="remark[]" v-bind:value="item.remark" >
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2" class="text-right" >รวม</td>
            <td>@{{ total_unit_price }}</td>
            <td>@{{ total_price_exc_vat }}</td>
            <td>@{{ total_vat }}</td>
            <td>@{{ total_price_inc_vat }}</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tfoot>
</table>

<input type="hidden" name="bill_total" id="bill_total" v-bind:value="total_price_inc_vat" >

</div>
@endblock

</form>

@endsection

@section('css')
<link rel="stylesheet" href="assets/js/plugins/select2/css/select2.min.css" />
<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css" />
@endsection

@section('script')
<script src="packages/handlebars/handlebars.min.js"></script>
<script src="assets/js/plugins/select2/js/select2.full.min.js"></script>
<script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="{{ asset('js/vue.js') }}"></script>

<script>
$(document).ready(function () {
    (function ($) {

        var vueApp = new Vue({
            el: '#table-stock-add',
            data: {
                list: @json($transactions),
                vat_type: document.querySelector('input[name="vat_type"]:checked').value,
                vat: 0.07,
                total_unit_price: 0,
                total_price_exc_vat: 0,
                total_vat: 0,
                total_price_inc_vat: 0
            },
            methods: {
                changeVatType: function () {
                    this.vat_type = document.querySelector('input[name="vat_type"]:checked').value;
                },
                getVat: function (price) {
                    price = parseFloat(price);
                    if (this.vat_type === "0") {
                        return 0;
                    } else if (this.vat_type === "1") {
                        return parseFloat(parseFloat(price * this.vat).toFixed(2));
                    } else if (this.vat_type === "2") {
                        return parseFloat(parseFloat((price - ( price / (1 + this.vat) ))).toFixed(2));
                    }
                },
                getTotal: function (total, vat) {
                    total = parseFloat(total);
                    vat = parseFloat(vat);
                    if (this.vat_type === "0") {
                        return total;
                    } else if (this.vat_type === "1") {
                        return total + vat;
                    } else if (this.vat_type === "2") {
                        return total;
                    }
                },
                getSubTotal: function (total, vat) { // exclude vat
                    total = parseFloat(total);
                    if (this.vat_type === "0") {
                        return total;
                    } else if (this.vat_type === "1") {
                        return total;
                    } else if (this.vat_type === "2") {
                        return total - vat;
                    }
                },
                getUnitPrice: function (subtotal, amount) {
                    subtotal = parseFloat(subtotal);
                    amount = parseFloat(amount);
                    if (amount <= 0) {
                        return 0;
                    }
                    return parseFloat((parseFloat(subtotal / amount).toFixed(2)));
                },
                calculate: function () {
                    var new_list = [...this.list];
                    this.total_unit_price = 0;
                    this.total_price_exc_vat = 0;
                    this.total_vat = 0;
                    this.total_price_inc_vat = 0;
                    let _this = this;
                    new_list = new_list.map(function(item){
                        var vat = vueApp.getVat(item.price);
                        var price_inc_vat = vueApp.getTotal(item.price, vat);
                        var price_exc_vat = vueApp.getSubTotal(item.price, vat);
                        var unit_price = vueApp.getUnitPrice(price_exc_vat, item.amount);

                        _this.total_unit_price += unit_price;
                        _this.total_price_exc_vat += price_exc_vat;
                        _this.total_vat += vat;
                        _this.total_price_inc_vat += price_inc_vat;

                        return {
                            material_name: item.material_name,
                            material_id: item.material_id,
                            amount: item.amount,
                            price: item.price,
                            price_inc_vat: price_inc_vat,
                            price_exc_vat: price_exc_vat,
                            remark: item.remark,
                            vat: vat,
                            unit_price: unit_price
                        };
                    });
                    this.list = new_list;
                }
            }
        });

        $('#material_id_add').select2({
            placeholder: 'Select an option'
        });

        $('#supplier_id').select2({
            placeholder: 'Select an option'
        });

        $(".btn-add").on("click", function(){
            var add_vat = vueApp.getVat($("#price").val());
            $.post("rb-admin/stock-import-add", {
                _token: $('meta[name="csrf-token"]').attr('content'),
                material_id: $("#material_id_add").val(),
                amount: $("#amount").val(),
                price: $("#price").val(),
                remark: $("#remark").val(),
                vat: add_vat
            }, function(res){
                console.log('res', res);
                if (res.status) {
                    var price_inc_vat = vueApp.getTotal(res.price, add_vat);
                    var price_exc_vat = vueApp.getSubTotal(res.price, add_vat);
                    var unit_price = vueApp.getUnitPrice(price_exc_vat, res.amount);
                    var context = {
                        material_name: res.material_name,
                        material_id: res.material_id,
                        amount: res.amount,
                        price: res.price,
                        price_inc_vat: price_inc_vat,
                        price_exc_vat: price_exc_vat,
                        remark: res.remark,
                        vat: res.vat,
                        unit_price: unit_price
                    };
                    vueApp.list.push(context);
                    vueApp.calculate();
                } else {
                    if (res.message) {
                        alert(res.message);
                    }
                }
            }, 'json');
        });

        $(".btn-save").on("click", function(){
            rb_confirm({
                title: 'ยืนยัน',
                text: 'ยืนยันการส่งข้อมูล',
                confirm_text: 'ตกลง',
                cancel_text: 'ยกเลิก',
                type: 'warning'
            }, function(e){
                if (e.value) {
                    $.post("rb-admin/stock-save-import", $("#form_product_material").serialize(), function(res){
                        console.log('res', res);
                        window.location.reload();
                    }, 'json').fail(function(res){
                        console.log("res err", res);
                        alert(res.responseJSON.message);
                    });
                }
            });
        });

        $(document).on("click", ".btn-del-row", function(){
            //$(this).parents('tr').remove();
            var index = parseInt($(this).attr("data-index"), 10);
            vueApp.list.splice(index, 1);
            vueApp.calculate();
        });

        $(document).on("change", "input[name='vat_type']", function(){
            vueApp.changeVatType();
            console.log("changeVatType");
            vueApp.calculate();
        });

    })(jQuery);
});

</script>

@endsection