@extends('admin.layout.master')
@section('title','RECIPE MANAGEMENT')
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=number] {
        height: 24px !important;
    }
    .table td {
        padding: 0px 5px;
        color: black;
    }
    .table th {
        background: var(--cl-primary);
        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">
        <form id="recipe_form" method="post"name="form" enctype="multipart/form-data"> {{--  action="{{ route('recipe.store') }}"  --}}
            <div class="">
                <div class="tab-content">
                    <div class="tab-pane active" id="tabs-1" role="tabpanel">
                        <div class="row">
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0">
                                <label for="ref_no">{{__('obs.name')}}</label>
                                <input type="text" class="form-control" name="name" id="name">
                            </div>
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0">
                                <label for="pay_type">{{__('obs.finished')}} {{__('obs.product')}} </label>
                                <select name="finished_product" id="finished_product" class="form-control product_live">
                                    <option value="0">{{__('obs.select')}} {{__('obs.product')}}</option>
                                </select>
                            </div>
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0">
                                <label for="note">{{__('obs.standard')}} {{__('obs.qty')}}</label>
                                <input type="text" class="form-control" name="s_qty" id="s_qty" value="1">
                            </div>
                            <div class="col-md-3 col-12 d-flex flex-wrap pr-0">
                                <label for="cost_id">{{__('obs.valid')}} {{__('obs.date')}} </label>
                                <input type="date" class="form-control" name="date" id="date">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5 col-12 flex-wrap pr-0">
                                <label for="note">{{__('obs.description')}}</label>
                                <div class="d-flex">
                                    <input type="text" class="form-control" name="note" id="note">
                                    <button type="button" style="height: 24px" onclick="install_form()" class="btn btn-danger d-flex">{{__('obs.install')}}
                                     <span class="fa fa-download"></span>
                                    </button>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end --}}
            <hr>
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{__('obs.product')}}</th>
                            <th>{{__('obs.desc')}}</th>
                            <th>{{__('obs.qty')}}</th>
                            <th>{{__('obs.wastage')}} {{__('obs.qty')}}</th>
                            <th>{{__('obs.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 product_live" style="width: 100%" name="raw_product_id[]" id="raw_product{{ $i }}" onchange="pro_ids()">
                                            <option value=" ">-- {{__('obs.select')}} {{__('obs.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=".000000000001" min="0"  name="quantity[]"
                                        id="quantity{{ $i }}" class="form-control">
                                </td>
                                <td>
                                    <input type="number" step=".000000000001" min="0"  name="w_quantity[]"
                                        id="w_quantity{{ $i }}" class="form-control">
                                </td>
                                <td text-align="center">
                                    <a class="btn btn-hover text-danger p-0" 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;top:40%;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 justify-content-center">
                {{-- <a type="button" class="btn-sina-close" href="{{ route('product.index') }}">{{__('obs.close')}}</a> --}}
                <input type="submit" class="btn-sina-submit" id="save" value="save">
            </div>
        </form>
    </div>
</div>

@include('inventory.recipe.previuos_recipe_modal')
@endsection
@section('script')
    <script>
        const store_setting = @json(store_info());
        var temp="{{$i}}";
        
        $(document).ready(function() {
            $("#recipe_form").on("submit", function (event) {
                event.preventDefault();
                ajaxCallV2("/recipe-store", "POST", new FormData(this), (res)=> window.location.reload(), (errors)=> {
                    $('#loader').hide();
                    $.each(errors.responseJSON.errors, function (field_name, error) {
                        const input = $(document).find("[name=" + field_name + "]");
                        if (input.parent().is('[error]')) input.parent().after(`<span class="text-strong text-danger validation"> <strong>${error[0].replace(' id', '')}</strong> </span>`)
                        else input.after(`<span class="text-strong text-danger validation"> <strong>${error[0].replace(' id', '')}</strong> </span>`);
                    });
                }, 3);
            });
        });

        const initProductLive = () => liveSearch('product_live', '/product-live-search', false, title = 'Select Product', {}, null, (item) => ({ id: item.id, text: item.custom_name }));
        initProductLive();
        
        function pro_ids() {
            let p_ids = [];
            $('.raw_product').each(function(i) {
                if(this.value > 0) p_ids.push(this.value);
            });
            globalVarsObject.additionalVarsForLiveSearch.p_ids = p_ids;
            console.log(globalVarsObject.additionalVarsForLiveSearch.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 product_live" style="width: 100%" name="raw_product_id[]" id="raw_product${temp}" onchange="pro_ids()">
                            <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=".000000000001" min="0"  name="quantity[]" id="quantity${temp}" class="form-control">
                </td>
                <td>
                    <input type="number" step=".000000000001" 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 p-0" name="remove _row${temp}" id="remove _row${temp}" onclick="removeRow(${temp})"><i class="fas fa-trash-alt"></i></a>
                </td>
            </tr>`;
            temp++;

            $('#tbl_body').append(str);
            initProductLive();
        }

        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').html(`<option value="${data.product_id}">${data.product.name_eng}</option>`).val(data.product_id).trigger('change')

            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 product_live" 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=".000000000001" min="0"  name="quantity[]"
                                id="quantity${index}" class="form-control" value="${rawData[index].quantity}">
                        </td>
                        <td>
                            <input type="number" step=".000000000001" 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 p-0" 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");
            initProductLive();
        }
    </script>
@stop