@extends('backend.layouts.master')
@section('title', 'Roll Cutting')
@push('css')
    <link rel="stylesheet" href="{{asset('backend/plugins/select2.min.css')}}">
    <link rel="stylesheet" href="{{ asset('myfile/backend/assets/datepicker/zebra_datepicker.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('myfile/backend/assets/datepicker/examples.css') }}" type="text/css">
    <style>
        input[readonly] {
            background-color: #eee;
            opacity: 1;
            border: 1px solid #c7c5c5;
        }
        .required{
            color:red;
            font-weight:bold;
        }
    </style>
@endpush
<!-- page content -->
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>
            @if(Session::has('success'))
                <div class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            @if(Session::has('error'))
                <div class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>
                                Roll Cutting <a href="{{route('stock.roll_cutting')}}" class="btn btn-xs btn-primary">Stock List</a>
                            </h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form action="{{route('stock.roll_update')}}" method="post" class="form-horizont" role="form" autocomplete="off" >
                             {{ csrf_field()}}
                                <div class="row">
                                    <div class="col-sm-3 col-md-3">
                                        <table class="table table-bordered table-condensed">
                                            <thead>
                                                <tr>
                                                    <th>Product </th>
                                                    <td>{{$product->product->product_name}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Category</th>
                                                    <td>{{$product->category->name}}</td>
                                                </tr>
                                                <tr>
                                                    <th>SQF</th>
                                                    <td>{{$product->product->square_foot}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Stock</th>
                                                    <td>{{$product->now_stock}}</td>
                                                </tr>
                                                <tr>
                                                    <th>SQF Stock</th>
                                                    <td>{{$product->product->square_foot * $product->now_stock}}</td>
                                                </tr>
                                                <tr>
                                                    <th>Price</th>
                                                    <td>{{$product->rate}}</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                    <div class="col-sm-9 col-md-9">
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>Seperate Quantity <span class="required">*</span></label>
                                                    <input type="number" name="cutting_quantity" class="form-control" id="cutting_quantity" value="{{$product->now_stock}}" min="1" max="{{$product->now_stock}}">
                                                </div>
                                            </div>
                                            <input type="hidden" name="purchase_detail_id" value="{{$product->id}}" >
                                            <input type="hidden" id="now_stock"  value="{{$product->now_stock}}" >
                                            <input type="hidden" id="per_roll_square_foot"  value="{{$product->product->square_foot}}" >
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label>Seperate SQF <span class="required">*</span></label>
                                                    <input type="number" name="seperate_sqf" class="form-control" id="seperate_sqf" value="{{$product->now_stock * $product->product->square_foot}}" min="1" readonly max="{{$product->now_stock * $product->product->square_foot}}" >
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>Select Product <span class="required">*</span></label>
                                                    <select class="form-control input-sm select2" name="product_name" id="product">
                                                        <option value="">-Select Product-</option>
                                                        @foreach($products as $pro)
                                                        <option value="{{ $pro->id }}"> {{ $pro->product_name }} </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <table class="table table-condensed table-bordered table-hover table-header-fixed dt-responsive green" id="sale">
                                            <thead class="info">
                                                <tr>
                                                    <th class="all">SL </th>
                                                    <th class="all">Product </th>
                                                    <th class="all">Category </th>
                                                    <th class="all">Unit </th>
                                                    <th class="all">Quantity </th>
                                                    <th class="all">Square Feet</th>
                                                    <th class="all" title="Total Square Foot" >TSQF</th>
                                                    <th class="all">MRP Rate</th>
                                                    <th class="all">Sub Total</th>
                                                    <th class="all">Remove</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th>-</th>
                                                    <th class="all" colspan="3">Total</th>
                                                    <th id="total_ordered">0</th>
                                                    <th>-</th>
                                                    <th id="total_tsqf">-</th>
                                                    <th>-</th>
                                                    <th id="total_sub">0</th>
                                                    <th>-</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <hr>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-5">
                                      <button class="btn btn- btn-warning" type="reset">Reset</button>
                                      <button type="submit" class="btn btn- btn-success">Save</button>
                                    </div>
                                </div>
                                <br><br>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
@endsection
@push('js')
    <script src="{{asset('backend/plugins/select2.min.js')}}"></script>
    <!-- Jquery Plugin For Date Calender-->
    <script type="text/javascript" src="{{ asset('myfile/backend/assets/datepicker/zebra_datepicker.src.js') }}"></script>
    <!-- jQuery autocomplete -->
    <script type="text/javascript">
        $(document).ready(function(){
            $('#datepicker').Zebra_DatePicker({
                format: 'd-m-Y',
                direction: 1,
            });
            /*-------------*/
            $(".select2").select2();


        var array = [];
        var total_tax = 0;
        var tax_type = "Fixed";
        var sl = 1
        $("#product").change(function () {
            var id = $(this).val();
           // $("#supplier").attr('disabled', true);
            var token = "{{csrf_token()}}";

            $.ajax({
                url: '{{ route("purchase.productDetails") }}',
                type: 'Get',
                data: {id: id, '_token' : token},
                dataType: 'json',
                success: function (response) {
            //alert(response)
            //console.log(response)
                    var len = response.length;
                   // $("#product").empty();
                   // $("#product").append("<option value=''> Select Product</option>");
                    /*for (var i = 0; i < len; i++) {
                        var id = response[1][i]['id'];
                        var name = response[1][i]['name'];
                        var disable = "";
                        $("#product").append("<option " + disable + " id='product_" + id + "' value='" + id + "'>" + name + "</option>");
                    }*/

                    var id = response['id'];
                    var name = response['product_name'];
                    var category_name = response['category']['name'];
                    //var brand_name = response['brand']['brand_name'];
                    var unit_name = response['unit']['name'];
                    var code =  response['code'];
                    var supplier_price =  response['supplier_price'];
                    var sale_price =  response['sale_price'] + 10;
                    var square_foot =  response['square_foot'];
                    var ordered_quantity =  1;
                    var tsqf = ordered_quantity * square_foot;
                    var sub_total =  parseFloat(tsqf*supplier_price).toFixed(2);
                    sl++
                    $("#sale tbody").append(
                        "<tr id='"+sl+"'>"
                          +"<td>"+sl+"</td>"
                          +"<td><input type='hidden' name='product_id[]' value='"+id+"' />"+name+" </td>"
                          +"<td><input type='hidden' name='category_name[]' value='"+category_name+"' />"+category_name+" </td>"
                          +"<td><input type='hidden' name='unit_name[]' value='"+unit_name+"' />"+unit_name+" </td>"
                          //+"<td><input type='hidden' name='code[]' value='"+code+"' />"+code+" </td>"
                          +"<td><input type='text' id='"+sl+"_ordered_quantity' class='ordered_quantity' name='ordered_quantity[]' min='1' value='"+ordered_quantity+"' size='6' /></td>"
                          +"<td><input type='text'  id='"+sl+"_square_foot' name='square_foot[]' value='"+square_foot+"' readonly size='6'></td>"
                          +"<td><input type='text'  id='"+sl+"_tsqf' name='tsqf[]' class='tsqf' value='"+tsqf+"' readonly size='6'></td>"
                          +"<td><input id='"+sl+"_price' type='text' name='supplier_price[]' class='supplier_price' value='"+supplier_price+"' size='6'/></td>"
                          +"<td class='sub_total' id='"+sl+"_sub_total'>"+sub_total+"</td>"
                          +"<td class='text-center'><i class='red fa fa-trash fa-lg'></i></td>"
                        +"</tr>");

                    array.push(id);
                    var idLength = array.length;
                    for(j = 0; j<idLength; j++){
                        $('#product_'+array[j]).attr('disabled','disabled').select2({placeholder:"",width:"auto",allowClear:!0});
                    }

                    var total_ordered = parseFloat($('#total_ordered').html());
                    total_ordered = total_ordered + 1;
                    $('#total_ordered').html(total_ordered);

                    calculate_sub_total();
                    calculate_total();
                }
            });
        });

        $(document).on('click','.fa-trash',function(){
            var id = $(this).parent().parent().attr('id');
            $('#'+id).remove();

            $('#product_'+id).removeAttr('disabled');
            array.splice($.inArray(id, array), 1);

           // $('#product').select2("destroy").select2({placeholder:"",width:"auto",allowClear:!0});

            calculate_ordered_quantity();

            calculate_sub_total();

            calculate_total();
        });
        $(document).on('keyup','.ordered_quantity',function(){
            var id = $(this).parent().parent().attr('id');
            var price = $('#'+id+'_price').val();
            var quantity = $('#'+id+'_ordered_quantity').val();
            var squarefoot = $('#'+id+'_square_foot').val();
            var tsqf = squarefoot * quantity;
            var sub_total =  parseFloat(tsqf*price).toFixed(2);

            $('#'+id+'_tsqf').val(tsqf);
            $('#'+id+'_sub_total').html(sub_total);

            calculate_ordered_quantity();
            calculate_sub_total();
            calculate_total();
        });
        $(document).on('keyup','.supplier_price',function(){
            var id = $(this).parent().parent().attr('id');
            var price = $('#'+id+'_price').val();
            var quantity = $('#'+id+'_ordered_quantity').val();
            var squarefoot = $('#'+id+'_square_foot').val();
            var tsqf = squarefoot * quantity;
            var sub_total =  parseFloat(tsqf*price).toFixed(2);

            $('#'+id+'_sub_total').html(sub_total);

            calculate_ordered_quantity();
            calculate_sub_total();
            calculate_total();
            calculate_due();
        });
        $(document).on('keyup','#cutting_quantity',function(){
            var qty = $(this).val();
            var per_roll_sqf = $('#per_roll_square_foot').val();
            var now_stock = $('#now_stock').val();
            if(qty >= now_stock){
                qty = now_stock;
                $('#cutting_quantity').val(now_stock);
            }else{
                var result = qty * per_roll_sqf;
                $('#seperate_sqf').val(result);
            }
        });
        $(document).on('change','#discount_type',function(){
            calculate_discount();
            calculate_grand_total();
            calculate_due();
        });
        $(document).on('keyup','#payment',function(){
            calculate_discount();
            calculate_grand_total();
            calculate_due();
        });
        function calculate_ordered_quantity(){
            var total_ordered = 0;
            //iterate through each td based on class and add the values
            $(".ordered_quantity").each(function() {
                var value = parseFloat($(this).val());
                total_ordered = total_ordered + value;
            });
            $('#total_ordered').html(total_ordered);
        }
        function calculate_discount(){
            var discount = $('#discount').val();
            var type = $('#discount_type').val();
            if (type != 'Fixed') {
                discount = parseFloat($('#total_value').html()) * discount / 100;
            }

            $('#total_discount').html(discount);
        }
        function calculate_sub_total(){
            var total_sub = 0;
            $(".sub_total").each(function() {
                var value = parseFloat($(this).html());
                total_sub = total_sub + value;
            });
            $('#total_sub').html(total_sub.toFixed(2));
            var total_tsqf = 0;
            $(".tsqf").each(function() {
                var value2 = parseFloat($(this).val());
                total_tsqf = total_tsqf + value2;
            });
            $('#total_tsqf').html(total_tsqf.toFixed(2));
        }
        function calculate_grand_total(){
           // var grand_total = parseFloat($('#total_value').html())-parseFloat($('#total_discount').html())+parseFloat($('#total_tax').html())+parseFloat($('#total_shipping').html());
            var grand_total = parseFloat($('#total_value').html())-parseFloat($('#total_discount').html());
            $('#grand_total').html(grand_total);
            $('.grand_total').val(grand_total);
            $('#due').html(grand_total);
            //alert(grand_total)
        }
        function calculate_total(){
            var total_items = 0;
            var total_sub = 0;
            //iterate through each td based on class and add the values
            $(".sub_total").each(function() {
                total_items++;
            });

            $('#total_items').html(total_items);
            $('#total_value').html($('#total_sub').html());
            $('#total_price').val($('#total_sub').html());

            calculate_discount();
           // calculate_tax();
            //calculate_shipping();
            calculate_grand_total();
        }
        // due section
        function calculate_due(){
            var pay = $('#payment').val() || 0;
            var grand_total = $('.grand_total').val() || 0;
            var due = parseInt(grand_total) - parseInt(pay);
            $('.due').val(due);
            $('#due').html(due);
        }
        $("#paid").click(function(){
            if($(this).is(':checked')){
                //alert('Check')
                $("#payment").val($('.due').val());
                calculate_due();
            }else{
                //alert('uncheck');
                $("#payment").val(0);
                calculate_due();
            }
        });
    })
    </script>
@endpush