@extends('admin.layout.master')
@section('title','RECIPE MANAGEMENT')
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=number] {
        height: 35px !important;
    }
    .table th, .table td {
                        padding: 0px 5px;
                        color: black;
                    }
            .table th {
                background: #ab3535;
                padding: 5px !important;
                color: white !important;
                }

</style>
@endsection
@section ('content')
<div class="card sina-card">
    <div class="card-header card-header-s">
        <h4>Recipe</h4>
    </div>
    <div class="card-body">
        <input type="hidden" name="" id="csrf-token" value="{{ Session::token() }}" />
        <form id="form" method="post" action="{{ route('recipe.store') }}" name="form" enctype="multipart/form-data">
            @csrf
            <div class="">
                <ul class="nav nav-tabs" role="tablist">
                   
                </ul><!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="tabs-1" role="tabpanel">
                        <div class="row mb-1">
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                                <div class="col-3 px-0">
                                    <label for="ref_no">NAME</label>
                                </div>
                                <div class="col-9 px-0">
                                    <input type="text" class="form-control" name="name" id="name">
                                </div>
                            </div>
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                                <div class="col-3 px-0">
                                    <label for="pay_type">FINISHED PRODUCT</label>
                                    
                                </div>
                                <div class="col-9 px-0">
                                    <select name="finished_product" id="finished_product" class="form-control">
                                        <option value="0">select product</option>
                                    </select>
                                   
                                </div>
                            </div>
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                                <div class="col-2 px-0">
                                    <label for="note">Standard Qty</label>
                                </div>
                                <div class="col-10 px-0">
                                    <input type="text" class="form-control" name="s_qty" id="s_qty" value="1">
                                </div>
                            </div>
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                                <div class="col-2 px-0">
                                    <label for="cost_id">Valid Date</label>
                                </div>
                                <div class="col-9 px-0">
                                    <input type="date" class="form-control" name="date" id="date">
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0 mb-3">
                                <div class="col-2 px-0">
                                    <label for="note">DESCRIPTION</label>
                                </div>
                                <div class="col-10 px-0">
                                    <input type="text" class="form-control" name="note" id="note">
                                    
                                </div>
                            </div>
                            <div class="col-md-4 col-12 d-flex flex-wrap pr-0 mb-3">
                                <div class="col-12 px-0">
                                    <div class="input-group">
                                        <span class="input-group-text">Install Recipe</span>
                                        <div class="input-group-append">
                                            <button type="button" onclick="install_form()" class="btn btn-danger">
                                            <span class="fa fa-download"></span>
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end --}}
            <hr>
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>PRODUCT</th>
                            <th>DESC</th>
                            <th>QTY</th>
                            <th>WASTAGE QTY</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody id="tbl_body">
                        @for ($i = 1; $i <= 5; $i++)
                            <tr id="tr{{ $i }}">
                                <td>{{ $i }}</td>
                                <td>
                                    <div class="d-flex text-center">
                                        <select class="form-control raw_product" style="width: 100%" name="raw_product_id[]" id="raw_product{{ $i }}">
                                            <option value=" ">-- Select Product --</option>
                                        </select>
                                        <a class="btn btn-hover text-success p-0 pl-2" id="add{{ $i }}"
                                            style="display: none"><i class="fas fa-plus"></i></a>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="desc[]" id="desc{{ $i }}" class="form-control">
                                </td>
                                <td>
                                    <input type="number" step=".01" min="0"  name="quantity[]"
                                        id="quantity{{ $i }}" class="form-control">
                                </td>
                                <td>
                                    <input type="number" step=".01" min="0"  name="w_quantity[]"
                                        id="w_quantity{{ $i }}" class="form-control">
                                </td>
                                <td text-align="center">
                                    <a class="btn btn-hover text-danger dlt" name="remove _row{{ $i }}"
                                        id="remove _row{{ $i }}" onclick="removeRow({{$i}})"><i
                                            class="fas fa-trash-alt"></i></a>
                                </td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-12 text-right mt-2 mt-md-0">
                    <button class="btn btn-sm btn-primary btn-pill btn-sina-submit" style="position: fixed;bottom:10%;right:0" onclick="addRow()" type="button"
                        name="add_Row" id="add_Row"><i class="fas fa-plus"></i></button>
                </div>
            </div>
            <hr>
            
            <div class="row pb-0  modal-footer">
                <a type="button" class="btn-sina-close" href="{{ route('product.index') }}">close</a>
                <input class="btn-sina-submit" type="submit" id="save" value="save">
            </div>
        </form>
    </div>
</div>

@include('inventory.recipe.previuos_recipe_modal')
@endsection
@section('script')
{{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/purchase/purchase-default.js') }}"></script> --}}
<!-- page script -->
<script>
    const store_setting = @json(store_info());
</script>
<script type="text/javascript">
    var temp="{{$i}}";
    var p_ids=[];
    $('#finished_product').select2({
            minimumInputLength: 3,
            // tags: [],
            ajax: {
                url: "/product-live-search",
                dataType: 'json',
                type: "POST",
                quietMillis: 50,
                data: function (term) {
                    return {
                        _token: $("input[name='_token']").val(),
                        type: 1,
                        p_ids:[0],
                        name: term
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name_eng + ((store_setting.is_barcode_show == 1) ? ' ('+ item.barcode +')' : ''),
                                id: item.id
                            }
                        })
                    };
                }
            }                                                   
        });
        initSelect2();
        function initSelect2(){
            pro_ids();
            $('.raw_product').select2({
                minimumInputLength: 3,
                // tags: [],
                ajax: {
                    url: "/product-live-search",
                    dataType: 'json',
                    type: "POST",
                    quietMillis: 50,
                    data: function (term) {
                        return {
                            _token: $("input[name='_token']").val(),
                            type: 2,
                            p_ids: (p_ids.length == 0 ? [0] : p_ids),
                            name: term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.name_eng + ((store_setting.is_barcode_show == 1) ? ' ('+ item.barcode +')' : ''),
                                    id: item.id
                                }
                            })
                        };
                    }
                }                                                   
            });
            
            $('#finished_product').select2({
                minimumInputLength: 3,
                // tags: [],
                ajax: {
                    url: "/product-live-search",
                    dataType: 'json',
                    type: "POST",
                    quietMillis: 50,
                    data: function (term) {
                        return {
                            _token: $("input[name='_token']").val(),
                            type: 1,
                            p_ids: [0],
                            name: term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.name_eng + ((store_setting.is_barcode_show == 1) ? ' ('+ item.barcode +')' : ''),
                                    id: item.id
                                }
                            })
                        };
                    }
                }                                                   
            });
        }
        function pro_ids() {
            $('.raw_product').each(function(i) {
                if(this.value > 0)
                    p_ids[i] = this.value;
            });
            console.log(p_ids);
        }
        function addRow() {
           
            var str = `<tr id="tr`+temp+`">
                                <td>`+temp+`</td>
                                <td>
                                    <div class="d-flex text-center">
                                        <select class="form-control raw_product" style="width: 100%" name="raw_product_id[]" id="raw_product`+temp+`">
                                            <option value=" ">-- Select Product --</option>
                                        </select>
                                        <a class="btn btn-hover text-success p-0 pl-2" id="add`+temp+`"
                                            style="display: none"><i class="fas fa-plus"></i></a>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="desc[]" id="desc`+temp+`" class="form-control">
                                </td>
                                <td>
                                    <input type="number" step=".01" min="0"  name="quantity[]"
                                        id="quantity`+temp+`" class="form-control">
                                </td>
                                <td>
                                    <input type="number" step=".01" min="0"  name="w_quantity[]"
                                        id="w_quantity`+temp+`" onkeyup="calculateTotal(`+temp+`)" onchange="calculateTotal(`+temp+`)" 
                                        class="form-control">
                                </td>
                                <td text-align="center">
                                    <a class="btn btn-hover text-danger dlt" name="remove _row`+temp+`"
                                        id="remove _row`+temp+`" onclick="removeRow(`+temp+`)"><i class="fas fa-trash-alt"></i></a>
                                </td>
                            </tr>`;

            $('#tbl_body').append(str);
        initSelect2();
           
        temp++;
        }
        function removeRow(i){
            $('#tr'+i).remove();
        }

        function install_form(){
            $("#previous_recipe_model").modal("show");
            $('#previous_recipe_model_table').DataTable({
                "destroy": true,
            });
        }
        function getFormatedDate(dateToBeFormated){
            var now = new Date(dateToBeFormated);
            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var return_date = now.getFullYear()+"-"+(month)+"-"+(day) ;
            return return_date;
        }
        function selected_recipe(data){
            var str ='';
            console.log(data);
           $('#name').val(data.name);
           $('#date').val(getFormatedDate(data.valid_till));
           $('#s_qty').val(data.quantity);
           $('#finished_product').each(function(){
                    if($(this).attr('value')==data.product_id){
                    $(this).attr('selected', true);
                }
            });
        //    $('#finished_product').val(data.name);
            rawData=data.raw_product;
                    if(rawData.length>0){
                        for (let index = 0; index < rawData.length; index++) {
                             str += `<tr id="tr`+index+`">
                                <td>`+(index+1)+`</td>
                                <td>
                                    <div class="d-flex text-center">
                                        <select class="form-control raw_product" style="width: 100%" name="raw_product_id[]" id="raw_product`+index+`">
                                            <option value=`+rawData[index].product_id+`>`+rawData[index].product.name_eng+`</option>
                                        </select>
                                        <a class="btn btn-hover text-success p-0 pl-2" id="add`+index+`"
                                            style="display: none"><i class="fas fa-plus"></i></a>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" name="desc[]" id="desc`+index+`" class="form-control" value="`+rawData[index].note+`">
                                </td>
                                <td>
                                    <input type="number" step=".01" min="0"  name="quantity[]"
                                        id="quantity`+index+`" class="form-control" value="`+rawData[index].quantity+`">
                                </td>
                                <td>
                                    <input type="number" step=".01" min="0"  name="w_quantity[]"
                                        id="w_quantity`+index+`" onkeyup="calculateTotal(`+index+`)" onchange="calculateTotal(`+index+`)" 
                                        class="form-control" value="`+rawData[index].waste_quantity+`">
                                </td>
                                <td text-align="center">
                                    <a class="btn btn-hover text-danger dlt" name="remove _row`+index+`"
                                        id="remove _row`+index+`" onclick="removeRow(`+index+`)"><i class="fas fa-trash-alt"></i></a>
                                </td>
                            </tr>`;
                        }
    
                    }
                    $('#tbl_body').html(str);
                    $("#previous_recipe_model").modal("hide");
                    initSelect2();
                }
        
    

</script>
{{-- @include('inventory.recipe.recipe_js') --}}
@stop