@extends('layouts.app')
@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/forms/selects/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/ui/jquery-ui.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<style>
.error-msg {
    background-color: #dd4b39 !important;
    display: none;
}
.error-msg span{
    color: #fff;
}
</style>
@endsection


<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <div class="heading-elements">
            <a href="{{ route('purchasing') }}">
                <button class="btn btn-info">Purchasings</button>
            </a>
        </div>
    </div>
    <div class="card-body collapse in">
        <div class="card-block card-dashboard">

            <form action="{{route('savePurchasing')}}" id="purchase_form" method="post">
                {{ csrf_field() }}
                
                <div class="row">
                    
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Type</label>
                            
                            <select name="type" id="type" class="form-control select2" style="width:100%;">
                                <option value="purchase">Purchase</option>
                                <option value="return">Return</option>
                            </select>
                            
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Supplier</label>
                            
                            @if(isset($suppliers) && !empty($suppliers))
                            <select name="supplier_id" id="supplier_id" class="form-control select2" style="width:100%;">
                            <option value="">Select Supplier</option>
                            @foreach($suppliers as $row)
                            <option value="{{$row->id}}">{{$row->name}} - [{{$row->phone}}]</option>
                            @endforeach
                            </select>
                            @else
                            <p class="text-danger">Please add suppliers first.</p>
                            @endif

                        </div>
                        <div class="alert alert-error error-msg supplier_id_err_msg_contnr" style="padding: 5px !important;">
                            <span id="supplier_id_err_msg"></span>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Date</label>
                            <input type="text" id="date" name="date" class="datepicker form-control" placeholder="Date" value="">
                        </div>
                        <div class="alert alert-error error-msg date_err_msg_contnr" style="padding: 5px !important;">
                            <span id="date_err_msg"></span>
                        </div>
                    </div>

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

                        <div class="form-group">
                            <label>Ingredients</label>
                            @if(isset($ingredients) && !empty($ingredients))
                            <select name="ingredient_id" id="ingredient_id" class="form-control select2" style="width:100%;">
                            <option value="">Select Ingredient</option>
                            @foreach($ingredients as $row)
                            <option value="{{$row->id}}|{{$row->name}}|{{$row->ingredient_unit}}">{{$row->name}} - ({{$row->ingredient_unit}})</option>
                            @endforeach
                            </select>
                            @else
                            <p class="text-danger">Please add Ingredients first.</p>
                            @endif

                        </div>

                        <div class="alert alert-error error-msg ingredient_id_err_msg_contnr" style="padding: 5px !important;">
                            <span id="ingredient_id_err_msg"></span>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="hidden-xs hidden-sm">&nbsp;</div>
                        <a class="btn btn-warning" style="margin-top: 5px;color:#fff" data-toggle="modal" data-target="#noticeModal">Read Me First</a>
                    </div>

                    <div class="hidden-lg hidden-sm">&nbsp;</div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive" id="purchase_cart">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="1%">SN</th>
                                        <th width="15%">Ingredient(Code)</th>
                                        <th width="20%">Unit Price</th>
                                        <th width="20%">Quantity</th>
                                        <th width="20%">Total</th>
                                        <th width="20%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8"></div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <table style="width: 100%">
                                <tbody>
                                    <tr>
                                        <td width="20%">G.Total</td>
                                        <td><input class="form-control" readonly="" type="text" name="grand_total" id="grand_total"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="clearfix"></div>
                    <div class="col-md-8"></div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <table style="width: 100%">
                                <tbody>
                                    <tr>
                                        <td width="20%">Paid</td>
                                        <td><input tabindex="3" class="form-control integerchk" type="text" name="paid" id="paid" onfocus="this.select();" onkeyup="return calculateAll()"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="alert alert-error error-msg paid_err_msg_contnr" style="padding: 5px !important;">
                            <span id="paid_err_msg"></span>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="clearfix"></div>
                    <div class="col-md-8"></div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <table style="width: 100%">
                                <tbody>
                                    <tr>
                                        <td width="20%">Due</td>
                                        <td><input class="form-control" type="text" name="due" id="due" readonly=""></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            
                <input class="form-control" readonly="" type="hidden" name="subtotal" id="subtotal" value="0">
                <input type="hidden" name="suffix_hidden_field" id="suffix_hidden_field">
                
                <div class="box-footer">
                    <a href="{{route('purchasing')}}" type="button" class="btn btn-danger">Close</a>
                    <button class="btn btn-success" name="submit" type="submit">Save changes</button>
                </div>

            </form>

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


<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="noticeModal">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-2x">×</i></span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 hidden-lg hidden-sm">
                        <p class="foodMenuCartNotice">
                        <strong>NOTICE</strong> : You must enter the Quantity and Unit price field, otherwise Inventory will not match.
                        </p>
                    </div>
                </div>
            </div>

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

@section('js')
<script src="{{asset('assets/admin/vendors/js/forms/select/select2.full.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/forms/select/form-select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/core/libraries/jquery_ui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/ui/jquery-ui/date-pickers.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">

    var ingredient_id_container = [];

    $(function () {
        $('.select2').select2();
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd'
        }).val();

        var suffix = 0;  
        var tab_index = 4;

        $('#ingredient_id').change(function(){
            var ingredient_details=$('#ingredient_id').val();
            if (ingredient_details != '') { 

                var ingredient_details_array = ingredient_details.split('|'); 

                var index = ingredient_id_container.indexOf(ingredient_details_array[0]);  

                if (index > -1) { 
                    alert('Ingredient already remains in cart, you can change the Unit Price or Quantity');
                    $('#ingredient_id').val('').change();
                    return false;
                } 

                var currency = "Rs";

                suffix++;
                tab_index++; 

                var cart_row = '<tr class="rowCount" data-id="' + suffix + '" id="row_' + suffix + '">'+
                    '<td style="padding-left: 10px;"><p id="sl_' + suffix + '">'+suffix+'</p></td>'+
                    '<td><span style="padding-bottom: 5px;">'+ingredient_details_array[1]+'</span></td>'+
                    '<input type="hidden" id="ingredient_id_' + suffix + '" name="ingredient_id[]" value="' + ingredient_details_array[0] + '"/>'+
                    '<td><input type="text" tabindex="'+ tab_index +'" id="unit_price_' + suffix + '" name="unit_price[]" onfocus="this.select();" class="form-control integerchk aligning" placeholder="Unit Price"/ value="" onkeyup="return calculateAll();"/><span class="label_aligning">'+currency+'</span></td>'+
                    '<td><input type="text" data-countID="'+suffix+'" tabindex="'+ tab_index+1 +'" id="quantity_amount_' + suffix + '" name="quantity_amount[]" onfocus="this.select();" class="form-control integerchk aligning countID"  placeholder="Qty" onkeyup="return calculateAll();" ><span class="label_aligning">' + ingredient_details_array[2] + '</span></td>'+
                    '<td><input type="text" id="total_' + suffix + '" name="total[]" class="form-control aligning" placeholder="Total" readonly /><span class="label_aligning">'+currency+'</span></td>'+
                    '<td><a class="btn btn-danger btn-sm" onclick="return deleter(' + suffix + ',' + ingredient_details_array[0] +');" ><i style="color:white" class="icon-trash-o"></i> </a></td>'+
                    '</tr>';  
                tab_index++;

                $('#purchase_cart tbody').append(cart_row);    

                ingredient_id_container.push(ingredient_details_array[0]);
                $('#ingredient_id').val('').change();
                calculateAll();
            }
        }); 
        
         
        // Validate form
        $("#purchase_form").submit(function(){
            var supplier_id = $("#supplier_id").val();
            var date = $("#date").val();
            //var note = $("#note").val();
            var paid = $("#paid").val(); 
            var ingredientCount = $("#purchase_cart tbody tr").length;
            var error = false;   
 

            if(supplier_id==""){ 
                $("#supplier_id_err_msg").text("The Supplier field is required.");
                $(".supplier_id_err_msg_contnr").show(200);
                error = true;
            }else{
                $(".supplier_id_err_msg_contnr").hide(200);
            }

            if(date==""){ 
                $("#date_err_msg").text("The Date field is required.");
                $(".date_err_msg_contnr").show(200);
                error = true;
            }else{
                $(".date_err_msg_contnr").hide(200);
            }

            if(ingredientCount < 1){ 
                $("#ingredient_id_err_msg").text("At least 1 Ingredient should be selected.");
                $(".ingredient_id_err_msg_contnr").show(200);
                error = true;
            }else{
                $(".ingredient_id_err_msg_contnr").hide(200);
            }
            
            if(paid==""){ 
                $("#paid_err_msg").text("The Paid field is required.");
                $(".paid_err_msg_contnr").show(200);
                error = true;
            }

            $(".countID").each(function () {
                var n = $(this).attr("data-countID");
                var quantity_amount = $.trim($("#quantity_amount_"+n).val());
                if(quantity_amount == '' || isNaN(quantity_amount)){
                    $("#quantity_amount_"+n).css({"border-color":"red"}).show(200).delay(2000,function(){
                        $("#quantity_amount_"+n).css({"border-color":"#d2d6de"});
                    });
                    error = true;
                }
            });

            if(error == true){
                return false;
            } 
        });


    })  

    function calculateAll(){
        var subtotal = 0;
        var i = 1;
        $(".rowCount").each(function () {
            var id = $(this).attr("data-id");
            var unit_price=$("#unit_price_"+id).val();
            var temp = "#sl_"+id;
            $(temp).html(i);
            i++;
            var quantity_amount = $("#quantity_amount_"+id).val();
            if($.trim(unit_price) == "" || $.isNumeric(unit_price) == false){
                unit_price=0;
            }
            if($.trim(quantity_amount) == "" || $.isNumeric(quantity_amount) == false){
                quantity_amount=0;
            }

            var quantity_amount_and_unit_price=parseFloat($.trim(unit_price))*parseFloat($.trim(quantity_amount));

            $("#total_"+id).val(quantity_amount_and_unit_price.toFixed(2));
            subtotal += parseFloat($.trim($("#total_" + id).val()));
        });


        if (isNaN(subtotal)) {
            subtotal = 0;
        }


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

        var other =  parseFloat($.trim($("#other").val())); 

        if($.trim(other)==""|| $.isNumeric(other)==false){
            other=0;
        }

        var grand_total = parseFloat(subtotal)  + parseFloat(other);

        grand_total = grand_total.toFixed(2);

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

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

        if($.trim(paid)==""|| $.isNumeric(paid)==false){
            paid=0;
        }

        var due = parseFloat(grand_total) - parseFloat(paid);

        $("#due").val(due.toFixed(2)); 
    }

    function deleter(suffix, ingredient_id){

        $("#row_"+suffix).remove();
        $("#paid").val('');
        var ingredient_id_container_new = [];
        for(var i = 0; i < ingredient_id_container.length; i++){
            if(ingredient_id_container[i] != ingredient_id){
                ingredient_id_container_new.push(ingredient_id_container[i]);
            }
        }
        ingredient_id_container = ingredient_id_container_new;
        calculateAll();
    } 

    function updateRowNo(){ 
        var numRows = $("#purchase_cart tbody tr").length; 
        for(var r=0;r<numRows;r++){
            $("#purchase_cart tbody tr").eq(r).find("td:first p").text(r+1);
        }
    }

</script>
@endsection
@endsection