@extends('admin.master')
@if(isset($editModeData))
	@section('title','Edit POS Sale')
@else
	@section('title','Add POS Sale')
@endif
@section('page_css')
<style>
    .panel-body {
        padding: 9px !important;
    }
    .mr-pr-0{
        margin: 0 !important;
        padding: 0 !important;
    }
    .mb-0{
        margin-bottom: 0 !important;
    }
    .thumbnail{
        cursor: pointer;
    }
    .mb{
        padding-right: 2px !important;
    }
    .form-group{
        margin-bottom: 10px !important;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    table, th, td {
        border: 1px solid #ddd;
        padding: 5px;
    }
    .product-name{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
    }
</style>
@endsection
@section('content')
	<div class="container-fluid" id="vue-wrapper">
		<div class="row bg-title page-breadcrumb bg-white">
			<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 ">
				<ol class="breadcrumb ">
					<li class="active breadcrumbColor"><a href="{{ url('dashboard') }}"><i class="fa fa-home"></i> Dashboard</a></li>
					<li>@yield('title')</li>
				</ol>
			</div>
			<div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
				<a href="{{route('pos_sale.index')}}"  class="btn btn-success pull-right m-l-20  waves-effect waves-light"><i class="fa fa-list-ul" aria-hidden="true"></i>  View All</a>
			</div>
		</div>
		<div class="row">
            <div class="panel panel-info">
                <div class="panel-body">
                    <div class="form-body">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mr-pr-0">
                                    <div class="col-sm-12 mb">
                                        <div class="form-group ">
                                            <input placeholder="Search Product" v-model="keywoard" type="text" class="form-control" @input="searchProduct()">
                                        </div>
                                    </div>
                                    <div class="col-sm-3 mb" v-for="product in results.data">
                                        <div class="thumbnail" @click="addToCard(product)">
                                            <img style="width: 80px;height: 80px" :src="makeImageUrl(product.image)" :title="product.name">
                                            <div class="caption">
                                                <p class="mb-0 product-name">@{{ product.name }}</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12 text-center">
                                        <ul class="pagination"  v-if="results.last_page > 1">
                                            <li :class="[ ((results.current_page == 1) ? 'disabled' : '') ]">
                                                <a :href="'?page='+results.current_page" @click.prevent="pageClicked(results.current_page-1)" aria-label="Previous" v-if="results.current_page != 1">
                                                    <span aria-hidden="true">«</span>
                                                </a>
                                                <a v-else>
                                                    <span  aria-hidden="true">«</span>
                                                </a>
                                            </li>
                                            <li v-for="pageNo in range(paginateLoop, numberOfPage)"
                                                :class="[ ((results.current_page == pageNo) ? 'active' : '') ]">
                                                <a :href="'?page='+pageNo" @click.prevent="pageClicked(pageNo)">@{{ pageNo }}</a>
                                            </li>

                                            <li :class="[ ((results.current_page == results.last_page) ? 'disabled' : '') ]" >
                                                <a  :href="'?page='+results.current_page" @click.prevent="pageClicked(results.current_page+1)" aria-label="Next" v-if="results.current_page != results.last_page">
                                                    <span aria-hidden="true">»</span>
                                                </a>
                                                <a v-else>
                                                    <span  aria-hidden="true">»</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="alert alert-danger" v-if="errors">
                                        <ul>
                                            <li v-for="error in errors">@{{ error[0] }}</li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group ">
                                            <input id="name" placeholder="Enter Date" v-model="form.date" type="text" class="form-control required date_field">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 ">
                                        <div class="form-group ">
                                            <select class="form-control warehouse_id" v-model="form.warehouse_id">
                                                <option value="">Select Warehouse</option>
                                                <option v-for="value in warehouseList" :value="value.id">@{{ value.name }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group ">
                                            <select class="form-control customer_id"  v-model="form.customer_id">
                                                <option value="">Select Customer</option>
                                                <option v-for="value in customerList" :value="value.id">@{{ value.name }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <table class=" " style="font-size: 13px">
                                            <thead style="background: #3cd0cc">
                                                <tr style="padding: 9px 8px;">
                                                    <th>Product</th>
                                                    <th>Price</th>
                                                    <th>Stock Qty</th>
                                                    <th  style="width: 90px;">Qty</th>
                                                    <th style="width: 90px;">Subtotal</th>
                                                    <th style="width: 20px;">
                                                        <i style="color: red" class="fa fa-trash-o" aria-hidden="true"></i>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(data,index) in form.cardProduct">
                                                    <td>@{{  data.name }}</td>
                                                    <td><input style="width: 90px;" type="number" v-model="data.retail_price" @input="netTotalCalculation"></td>
                                                    <td>@{{ data.product_stock_quantity }}</td>
                                                    <td><input style="width: 90px;" type="number" v-model="data.qty" @input="checkProductStock(index,data.product_stock_quantity,data.qty)"></td>
                                                    <td v-if="data.qty">@{{ data.retail_price *  data.qty}}</td>
                                                    <td v-else>0</td>
                                                    <td>
                                                        <i @click="removeFromCard(index)" style="cursor: pointer;color: red" class="fa fa-trash-o" aria-hidden="true"></i>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td colspan="3" class="text-right"><b>Total Qty</b></td>
                                                    <td class="text-center"><b>@{{ itemTotal }}</b></td>
                                                    <td><b>@{{ subTotal }}</b></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" class="text-right"><b>Tax</b></td>
                                                    <td><input style="width: 90px;" type="number" v-model="form.tax" @input="netTotalCalculation"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" class="text-right"><b>Discount</b></td>
                                                    <td><input  style="width: 90px;"  type="number"  v-model="form.discount" @input="netTotalCalculation"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" class="text-right"><b>Net Total</b></td>
                                                    <td><input  style="width: 90px;background: rgb(179, 179, 179)" readonly  type="number" v-model="form.total_amount"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" class="text-right"><b>Payment</b></td>
                                                    <td><input  style="width: 90px;"  type="number"  v-model="form.payment_amount" @input="netTotalCalculation"></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" class="text-right"><b>Due</b></td>
                                                    <td><input  style="width: 90px;background: rgb(179, 179, 179)"  readonly type="number"  v-model="form.total_due" @input="netTotalCalculation"></td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-md-6"></div>
                                    <div class="col-md-6">
                                        <br>
                                        <div class="buttons">
                                            <div class="btn-group btn-group-justified">
                                                <div class="btn-group">
                                                    <a @click="update" style="color: #fff;" class="tip btn btn-primary tip" title="" data-target="#myModal" data-toggle="modal" data-original-title="Add Payment">
                                                        <i class="fa fa-money"></i> <span class="hidden-sm hidden-xs">Update</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
@endsection

@section('page_scripts')
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

    <script type="text/javascript">
        var app = new Vue({
            el: '#vue-wrapper',
            data: {
                warehouseList: @json($warehouse),
                customerList: @json($customer),
                results: [],
                form: @json($editModeData),
                keywoard: '',
                errors:null

            },
            methods: {
                index: function(page,warehouse_id){
                    var _this = this;
                    var action = base_url+'get-product?page='+page+"&keywoard="+this.keywoard+'&warehouse_id='+warehouse_id;
                    axios.get(action).then(function (response) {
                        _this.results = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                },

                update: function() {
                    var _this = this;

                    axios.put(base_url+'pos_sale/'+_this.form.id,_this.form).then(function (response) {
                        if(response.data.success == 'success') {
                            window.location.href = base_url+'pos_sale';
                        } else {
                           location.reload();
                        }
                    }).catch(function (error) {
                        if(error.response){
                            _this.errors = error.response.data.errors;
                        }
                    });
                },

                range: function(start, count) {
                    return Array.apply(0, Array(count))
                        .map(function (element, index){
                            return index + start;
                        });
                },

                makeImageUrl: function(url){
                    if(url) {
                        return base_url + 'uploads/product/' + url;
                    }else{
                        return base_url + 'admin_assets/img/no_image.png';
                    }
                },

                pageClicked: function(pageNo){
                    this.index(pageNo,this.form.warehouse_id);
                },

                searchProduct: function() {
                    this.index(1,this.form.warehouse_id);
                },

                addToCard: function (product) {
                    var _this = this;
                    var found = _this.form.cardProduct.findIndex(function(item,index) {
                        if (item.id == product.id) {
                            return item;
                        }
                    });
                    if(found == -1){
                        _this.form.cardProduct.push(product);
                    }
                },

                removeFromCard: function(index){
                    this.form.cardProduct.splice(index,1);
                    this.netTotalCalculation();
                },

                netTotalCalculation: function(){
                    var total = 0;
                    total = (this.subTotal + Number(this.form.tax)) - Number(this.form.discount);
                    this.form.total_amount = total;

                    this.form.total_due = total - Number(this.form.payment_amount);

                },

                checkProductStock(index,stockQty,inputQty){
                    if(Number(inputQty) > Number(stockQty)){
                        this.form.cardProduct[index].qty = 0;
                        $.toast({
                            heading: 'Warning !',
                            text: 'Stock quantity can not greater  then input quantity !',
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                            hideAfter: 3000,
                            stack: 6
                        });
                    }else if(Number(inputQty) < 0) {
                        this.form.cardProduct[index].qty = 0;
                    }
                    this.netTotalCalculation();
                }

            },
            computed: {
                itemTotal:function () {
                    var total = 0;
                    this.form.cardProduct.forEach(function (item) {
                        if(item.qty) {
                            total += Number(item.qty);
                        }
                    });
                    this.form.total_quantity = total;
                    return total;
                },

                subTotal:function () {
                    var total = 0;
                    this.form.cardProduct.forEach(function (item) {
                        if(item.qty) {
                            total += Number(item.qty) * Number(item.retail_price);
                        }
                    });
                    return total;
                },
                paginateLoop: function(){
                    var results = this.results;
                    if(results.last_page > 11){
                        if((results.last_page - 5) <= results.current_page){
                            return results.last_page - 10;
                        }

                        if(results.current_page > 6){
                            return results.current_page - 5;
                        }
                    }
                    return 1;
                },

                numberOfPage: function(){
                    if(this.results.last_page < 11){
                        return this.results.last_page;
                    }else{
                        return 11;
                    }
                },
            },

            mounted(){
                var _this = this;

                setTimeout(function () {
                    $(".customer_id").select2();
                    $(".warehouse_id").select2();
                },100);

                $('.customer_id').on('select2:select', function (e) {
                    var data = e.params.data.id;
                    _this.form.customer_id = data;
                });

                $('.warehouse_id').on('select2:select', function (e) {
                    var data = e.params.data.id;
                    _this.form.warehouse_id = data;

                    _this.form.cardProduct = [];
                    _this.form.tax = 0;
                    _this.form.discount = 0;
                    _this.form.total_amount = 0;
                    _this.form.payment_amount = 0;
                    _this.form.total_due = 0;

                    _this.index(1,data);

                });

                $(document).on("focus", ".date_field", function () {
                    $(this).datepicker({
                        format: 'yyyy-mm-dd',
                        todayHighlight: true,
                        clearBtn: true
                    }).on('changeDate', function (ev) {
                        $(this).datepicker('hide');
                        if(ev.date == undefined){
                            _this.form.date = '';
                        }else {
                            _this.form.date = moment(ev.date).format('YYYY-MM-DD');
                        }

                    });
                });

                _this.netTotalCalculation();

                 _this.index(1,_this.form.warehouse_id);

            },
        })
    </script>
@endsection