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

@include('validation.success')
<div class="card box-shadow-1">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <div class="heading-elements">
            <a href="{{ route('menuItemRecipes') }}">
                <button class="btn btn-info">Menu Item Recipes</button>
            </a>
        </div>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">

            <div class="alert alert-danger" id="error_msg" style="display:none"></div>
            <form id="recipe_form" method="post" action="{{route('saveRecipe')}}" class="card-block">
                {{ csrf_field() }}
                
                <div class="row form-group">
                    
                    <div class="col-md-6">
                        <div class="row">
                            <label class="col-sm-2">Menu Items</label>
                            <div class="col-sm-8">
                                @if(isset($menuitems) && !empty($menuitems))
                                    <select name="menu_item_id"  id="menu_item_id" class="form-control select2">
                                        <option value="">Select Menu item</option>
                                            @foreach($menuitems as $row)
                                                <optgroup label="{{$row->menu_item_name}}">
                                                    @foreach($row->prices as $menu)
                                                        <option value="{{$menu->id}}">{{$menu->title}}</option>
                                                    @endforeach
                                                </optgroup>   
                                            @endforeach
                                    </select>
                                @else
                                    <p class="text-danger"><b>Please add menu item first in Menu !</b></p>
                                @endif

                                <div class="alert alert-error error-msg menu_item_err_msg_contnr" style="padding: 5px;">
                                    <span id="menu_item_id_err_msg"></span>
                                </div>

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


                    <div class="col-md-6">
                        <div class="row">
                            <label class="col-sm-2">Ingredient Consumptions</label>
                            <div class="col-sm-8">
                                @if(isset($ingredient_categories) && !empty($ingredient_categories))
                                    <select name="ingredient_id"  id="ingredient_id" class="form-control select2">
                                        <option value="">Select Ingredients</option>
                                            @foreach($ingredient_categories as $row)
                                                <optgroup label="{{$row->category_name}}">
                                                    @foreach($row->ingredients as $ingredient)
                                                        <option value="{{$ingredient->id}}|{{$ingredient->name}}|{{$ingredient->ingredient_unit}}">{{$ingredient->name}} - ({{$ingredient->code}})</option>
                                                    @endforeach
                                                </optgroup>   
                                            @endforeach
                                    </select>
                                @else
                                    <p class="text-danger"><b></b></p>
                                @endif

                                <div class="alert alert-error error-msg ingredient_err_msg_contnr" style="padding: 5px;">
                                    <span id="ingredient_id_err_msg">At least 1 Ingredient is required.</span>
                                </div>

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

                </div>
                
                <div class="row form-group">
                    <div class="col-md-12">
                        <div class="table-responsive table-bordered" id="ingredient_consumption_table">          
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Ingredient</th>
                                        <th>Consumption</th>
                                        <th>Action</th> 
                                    </tr>
                                </thead>
                                <tbody>

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

                <div class="row">
                    <div class="col-sm-12">
                        <a class="btn btn-danger" href="{{route('dashboard')}}">Close</a>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
               
            </form>

        </div>
    </div>
</div> <!-- end row -->

@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 type="text/javascript">

var ingredient_id_container = [];

$(function () {
    $('.select2').select2();

    $(document).on('keydown', '.integerchk', function(e){
        /*$('.integerchk').keydown(function(e) {*/
        var keys = e.charCode || e.keyCode || 0;
        // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
        // home, end, period, and numpad decimal
        return (
        keys == 8 || 
            keys == 9 ||
            keys == 13 ||
            keys == 46 ||
            keys == 110 ||
            keys == 86 ||
            keys == 190 ||
            (keys >= 35 && keys <= 40) ||
            (keys >= 48 && keys <= 57) ||
            (keys >= 96 && keys <= 105));
    });

    var suffix = 0;  
    var tab_index = 6;

    $('#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 consumption value!');
                $('#ingredient_id').val('').change();
                return false;
            } 

            suffix++;
            tab_index++; 

            var cart_row = '<tr class="rowCount" id="row_' + suffix + '">'+
                '<td style="width: 12%; padding-left: 10px;"><p>'+suffix+'</p></td>'+
                '<td style="width: 23%"><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 style="width: 30%"><input type="text" tabindex="'+ tab_index +'" id="consumption_' + suffix + '" name="consumption[]" onfocus="this.select();"  class="form-control integerchk aligning" style="width: 85%;" placeholder="Consumption"/><span class="label_aligning">' + ingredient_details_array[2] + '</span></td>'+
                '<td style="width: 17%"><a class="btn btn-danger btn-sm" style="color:white" onclick="return deleter(' + suffix + ',' + ingredient_details_array[0] +');" ><i class="icon-trash-o"></i> </a></td>'+
                '</tr>';  

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

            ingredient_id_container.push(ingredient_details_array[0]);
            /*updateRowNo();*/
            $('#ingredient_id').val('').change();
            updateRowNo();
        }
    }); 
        
    // Validate form
    $("#recipe_form").submit(function(){
        var menu_item_id = $("#menu_item_id").val();
        var ingredientCount = $("#form-table tbody tr").length;
        var error = false;  

        if(menu_item_id==""){ 
            $("#menu_item_id_err_msg").text("The menu item field is required.");
            $(".menu_item_err_msg_contnr").show(200);
            error = true;
        }  

        if(ingredient_id_container.length == 0){ 
            $("#ingredient_id_err_msg").text("At least 1 Ingredient is required.");
            $(".ingredient_err_msg_contnr").show(200);
            error = true;
        } 

        for(var n = 1; n <= ingredient_id_container.length+1; n++){  
            var ingredient_id = $.trim($("#ingredient_id_"+n).val()); 
            var consumption = $.trim($("#consumption_"+n).val());   
            
            if(ingredient_id.length > 0){
                if(consumption == '' || isNaN(consumption)){ 
                    $("#consumption_"+n).css({"border-color":"red"}).show(200);
                    error = true;
                }  
            }
        }  

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


}) 

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();
} 

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

</script>
@endsection 
@endsection