@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('inventoryAdjustments') }}">
                <button class="btn btn-info">Inventory Adjustments</button>
            </a>
        </div>
    </div>
    <div class="card-body collapse in">
        <div class="card-block card-dashboard">

            <form action="{{route('storeAdjustments')}}" id="consumption_form" method="post">
                {{ csrf_field() }}
                
                <div class="row">

                    <div class="col-md-3">
                        <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="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="consumption_cart">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="1%">SN</th>
                                        <th width="15%">Ingredient(Code)</th>
                                        <th width="20%">Quantity<span style="color:transparent"></span></th>
                                        <th width="20%">Consumption Status</th>
                                        <th width="20%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="clearfix"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Note</label>
                            <textarea class="form-control" rows="2" id="note" name="note" placeholder="Enter ..."></textarea>
                        </div>
                        <div class="alert alert-error error-msg note_err_msg_contnr" style="padding: 5px !important;">
                            <span id="note_err_msg"></span>
                        </div>
                    </div>

                </div>

                
                <div class="clearfix"></div>
                <input type="hidden" name="suffix_hidden_field" id="suffix_hidden_field">
                
                <div class="box-footer">
                    <a href="{{route('inventoryAdjustments')}}" 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 select Consumption Status to make the Inventory Adjustments.
                        </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 () { 

    //Initialize Select2 Elements

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

    var suffix = 0;  
    $('#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 Quantity/Amount');
                $('#ingredient_id').val('').change();
                return false;
            } 

            suffix++; 
            var cart_row = '<tr class="rowCount" data-id="' + suffix + '" id="row_' + suffix + '">'+
                '<td style="padding-left: 10px;"><p id="sl_' + suffix + '">'+suffix+'</p></td>'+
                '<input type="hidden" id="ingredient_id_' + suffix + '" name="ingredient_id[]" value="' + ingredient_details_array[0] + '"/>'+
                '<td><span style="padding-bottom: 5px;">'+ingredient_details_array[1]+'</span></td>'+
                '<td style="width: 15%"><input type="text" data-countID="'+suffix+'" id="consumption_amount_' + suffix + '" name="consumption_amount[]" onfocus="this.select();" class="form-control integerchk aligning" placeholder="Consumption Quantity" onkeyup="return calculateAll();"/><span class="label_aligning"> ' + ingredient_details_array[2] + '</span></td>'+
                '<td><select tabindex="4" class="form-control select2" name="consumption_status[]" id="consumption_status_' + suffix + '" style="width: 100%;"><option value="">Select</option><option value="plus">Plus</option><option value="minus">Minus</option></select></td>'+
                '<td><a class="btn btn-danger btn-sm" style="margin-left: 5px; margin-top: 10px;" onclick="return deleter(' + suffix + ',' + ingredient_details_array[0] +');" ><i style="color:white" class="icon-trash-o"></i> </a></td>'+
                '</tr>';

            $('#suffix_hidden_field').val(suffix);  

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

            ingredient_id_container.push(ingredient_details_array[0]);

            $('#ingredient_id').val('').change();
            calculateAll();

        }
    }); 
     
    // Validate form
    $("#consumption_form").submit(function(){
        var date = $("#date").val();
        var note = $("#note").val(); 
        var ingredientCount = $("#consumption_cart tbody tr").length;
        var error = false;

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

        if(ingredientCount < 1){ 
            $("#ingredient_id_err_msg").text("At least 1 Ingredient is required.");
            $(".ingredient_id_err_msg_contnr").show(200)
            error = true;
        } 

        if(note==""){
            $("#note_err_msg").text("The Note field is required.");
            $(".note_err_msg_contnr").show(200);
            error = true;
        }
        
        $(".integerchk").each(function () {
            var n = $(this).attr("data-countID");
            var consumption_amount = $.trim($("#consumption_amount_"+n).val());
            if(consumption_amount == '' || isNaN(consumption_amount)){
                $("#consumption_amount_"+n).css({"border-color":"red"}).show(200).delay(2000,function(){
                    $("#consumption_amount_"+n).css({"border-color":"#d2d6de"});
                });
                error = true;
            }

            var consumption_status = $.trim($("#consumption_status_"+n).val());
            if(consumption_status == ''){
                $("#consumption_status_"+n).css({"border-color":"red"}).show(200).delay(2000,function(){
                    $("#consumption_status_"+n).css({"border-color":"#d2d6de"});
                });
                error = true;
            }
        });
        if(error == true){
           
            return false;
        } 
    });

})  

function calculateAll(){
    var total_loss = 0;
    var i = 1;
    $(".rowCount").each(function () {
        var id = $(this).attr("data-id");
        var consumption_amount=$("#consumption_amount_"+id).val();
        var temp = "#sl_"+id;
        $(temp).html(i);
        i++;
        if (typeof(consumption_amount) !== "undefined" && consumption_amount !== null) {

            var last_purchase_price = $("#last_purchase_price_"+id).val();

            if($.trim(consumption_amount) == "" || $.isNumeric(consumption_amount) == false){
                consumption_amount=0;
            }
            if($.trim(last_purchase_price) == "" || $.isNumeric(last_purchase_price) == false){
                last_purchase_price=0;
            }  
             
            var loss_amount = parseFloat($.trim(consumption_amount)) * parseFloat($.trim(last_purchase_price));

            $("#loss_amount_"+id).val(loss_amount.toFixed(2));
            total_loss += parseFloat($.trim($("#loss_amount_" + id).val()));

        }
    });

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

}

function deleter(suffix, ingredient_id){
    
    $("#row_"+suffix).remove();
    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;

    updateRowNo();
    calculateAll();
    
} 

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