@extends('admin.layout.master')
@section('title','RECIPE MANAGEMENT')
@section('custom_style')
<style>
    /* input[type=text],
    input[type=file],
    input[type=number] {
        height: 35px !important;
    } */

</style>
@endsection
@section ('content')
<style>
    .gj-datepicker-bootstrap [role=right-icon] button .gj-icon, .gj-datepicker-bootstrap [role=right-icon] button .material-icons {
        top: 4px;
    }
</style>
<div class="card sina-card">
    <div class="card-header card-header-s d-flex flex-wrap align-items-center">
        <h4 class="col-6 pl-0">Recipe List</h4>
        <div  class="col-6 d-flex justify-content-end">
            {{-- <a href="{{route('purchase.create')}}" class="btn-sina-title-add d-flex align-items-center" type="button" name="button">
                <div class="col pl-0 pr-2">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <div class="">  Add New </div>
            </a> --}}
        </div>
    </div>
    {{-- <div class="card-body" id="edit_form" style="display: none">
        <form id="form" method="post" action="{{ route('recipe.update') }}" name="form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="recipe_id" id="recipe_id">
            <input type="hidden" name="deleted_raw_product_table_id" id="deleted_raw_product_table_id" value="0">
            <div class="tab-content">
                <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" step=".01" 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-3 col-12 d-flex flex-wrap pr-0 mb-3">
                        <div class="col-3 px-0">
                            <label for="pay_type">Status</label>
    
                        </div>
                        <div class="col-9 px-0">
                            <select name="status" id="status" class="form-control select2">
                                <option value="1" class="text-success">ACTIVE</option>
                                <option value="0" class="text-danger">INACTIVE</option>
                            </select>
    
                        </div>
                    </div>

                </div>
                
               
            </div>
           
            <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">

                    </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 class="card-body">
        <form id="form" method="get" action="{{ route('recipe.index') }}" name="form" enctype="multipart/form-data"> 
            <div class="row mb-0 mt-0 pt-2 justify-content-end" style="border:dashed 1px green"> 
                <div class="col-md-6 col-12 d-flex flex-wrap pr-0 mb-3">
                    <div class="col-5 px-0">
                        <input type="date" class="form-control" name="start_date">
                    </div>
                    <div class="col-2 px-0 text-center">
                        <label for="cost_id">TO</label>
                    </div>
                    <div class="col-5 px-0">
                        <input type="date" class="form-control" name="end_date">
                    </div>
                </div>
                <div class="col-md-2 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">Search</span>
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-danger">
                                <span class="fa fa-search"></span>
                                </button>
                            </div>

                        </div>
                    </div>
                </div> 
            </div>
        </form>
        <hr>
        <div class="table-responsive"  id="print">
            <table class="table table-bordered table-hover">
                <thead class="">
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Finished Product</th>
                        <th>Valid Till</th>
                        <th>By</th>
                        <th>Approval Status</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                {{-- @php
                    $action_user=checkUserCapableToAprroveList('App\Models\Inventory\Recipe',$action_id);
                @endphp --}}
                <tbody id="tbl_body">
                    @forelse ($recipes as $key=>$recipe)
                    <tr>
                        <th>{{ ($key+1) }}</th>
                        <th>{{ $recipe->name }}</th>
                        <th>{{ $recipe->product?$recipe->product->name_eng:'' }}</th>
                        <th>{{ date('d-m-Y',strtotime($recipe->valid_till)) }}</th>
                        <th>{{ $recipe->madeBy->name }}</th>
                        <th id="check_th{{$recipe->id}}">
                            @if(($recipe->approved_status==2))
                                <button type="button" class="btn btn-success">Approved</button>
                            @else
                                @if($action_step_id=checkApproval($recipe->approvals,$action_id))
                                {{-- @php($action_step_id=checkApproval($recipe->approvals,$action_id)) --}}
                                {{-- @if(!$recipe->approvals || !$recipe->approvals->where('status',1)->where('action_step_id',$action_step_id)->first()) --}}
                                    <input  type="checkbox" onclick="updateBtn({{$recipe->id}})" id="check{{$recipe->id}}" class="check{{$recipe->id}}" name="asigned_step[{{$recipe->id}}]" value="{{$recipe->id}}">
                                    <button type="button" id="update_btn{{$recipe->id}}" class="btn btn-warning" style="display:none" onclick="updateApproveStatus({{$recipe->id}},{{$action_step_id}},'App\\Recipe')">Aprrove</button>
                                {{-- @endif --}}
                                @elseif($recipe->approvals && count($recipe->approvals->where('admin_id',active_user()))>0)
                                <button type="button" class="btn btn-info">You've Approved<br> at {{date('d-m-Y',strtotime($recipe->approvals->where('admin_id',active_user())->first()->created_at))}}</button>
                                @else
                                {{'No Acess'}}
                                @endif

                            @endif
                        </th>
                        <th>
                            @if(checkAuthPermission('recipe.update'))
                                <button type="button" class="btn btn-info" onclick="setDataForEdit({{$recipe}})"><i class="fas fa-wrench"></i></button><a class="btn btn-info" href="{{route('recipe.print',['recipe_id'=>$recipe->id])}}"><i class="fas fa-print"></i></a></th>
                            @endif
                    </tr>
                    @empty
                        
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-end pt-2">
            {{-- {!! $invoices->links() !!} --}}
        </div>
    </div>
</div>
@include('inventory.recipe.recipe_edit_modal')
@endsection
@section('script')
{{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/purchase/purchase-default.js') }}"></script> --}}
<!-- page script -->
<script type="text/javascript">
var temp;
var deleted_ids=[];
var p_ids=[];
    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 setDataForEdit(data){
        $("#recipe_edit_modal").modal("hide");
        //$('#edit_form').hide();
        $('#deleted_raw_product_table_id').val(0);
        deleted_ids=[];
        var str ='';
        console.log(data);
        $('#recipe_id').val(data.id);
        $('#name').val(data.name);
        $('#note').val(data.note);
        $('#date').val(getFormatedDate(data.valid_till));
        $('#s_qty').val(data.quantity);
        $('#status option').each(function(){
            if($(this).attr('value')==data.status){
                $(this).attr('selected', true);
            }
        });
        $('#finished_product').html(
        `<option value="`+data.product_id+`">`+(data.product?data.product.name_eng:'')+`</option>`
        );
    //    $('#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>
                            </div>
                            <input type="hidden" id="raw_product_table_id`+index+`" name="raw_product_table_id[]" value="`+rawData[index].id+`">
                        </td>
                        <td>
                            <input type="text" name="desc[]" id="desc`+index+`" class="form-control" value="`+(rawData[index].note?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" min="0" step=".01"  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>`;
                    temp=(index+2);
                }

            }
            
            $('#tbl_body_model').html(str);
            // $('#edit_form').show();
            $("#recipe_edit_modal").modal("show");
            initSelect2();
            $('#status').select2();
        }
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],
                    //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
                        }
                    })
                };
            }
        }                                                   
    });
    
}
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" min="0" step=".01"  name="quantity[]"
                                id="quantity`+temp+`" class="form-control">
                        </td>
                        <td>
                            <input type="number" min="0" step=".01"  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_model').append(str);
    initSelect2();
    
temp++;
}
function pro_ids() {
        $('.raw_product').each(function(i) {
            if(this.value > 0)
                p_ids[i] = this.value;
        });
        console.log(p_ids);
    }
function removeRow(row_id){
    var deleted_id=$('#raw_product_table_id'+row_id).val();
    if(deleted_id){
        deleted_ids.push(deleted_id);
        $('#deleted_raw_product_table_id').val(deleted_ids);
    }
        $('#tr-'+row_id).remove();
        temp--;
}
function setDataForPrint(data){
    $("#print_modal").modal("hide");
    var str =`<thead>
                <tr>
                    <th>#</th>
                    <th>PRODUCT</th>
                    <th>DESC</th>
                    <th>QTY</th>
                    <th>WASTAGE QTY</th>
                </tr>
            </thead>
            <tbody id="tbl_body">`;
    console.log(data);
    $('#recipe_id').val(data.id);
    $('#name').val(data.name);
    $('#note').val(data.note);
    $('#date').val(getFormatedDate(data.valid_till));
    $('#s_qty').val(data.quantity);
    $('#status option').each(function(){
        if($(this).attr('value')==data.status){
            $(this).attr('selected', true);
        }
    });
    $('#finished_product').html(
    `<option value="`+data.product_id+`">`+data.product.name_eng+`</option>`
    );
    //    $('#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>`+rawData[index].product.name_eng+`</td>
                        <td>`+(rawData[index].note?rawData[index].note:'')+`</td>
                        <td>`+rawData[index].quantity+`
                        </td>
                        <td>`+rawData[index].waste_quantity+`</td>
                    </tr>`;
                    temp=(index+2);
                }
            }
            str += `</tbody></table>`;
            console.log(str);
            $('#print_modal_data').html(str);
            $("#print_modal").modal('show');
}
function updateBtn(row_id){
    var checked=$('#check'+row_id).is(':checked');
    //alert(checked);
    if(checked){
        $('#update_btn'+row_id).show('slow');
    }else{
        $('#update_btn'+row_id).hide('slow');
    }
}
function updateApproveStatus(row_id,action_step_id,model_name){
    //alert(model_name);
    if(confirm('are you sure?')){
        $.ajax({
                type: "GET",
                url: "{{route('role_mapping.update_approval_log')}}",
                data: {
                    approvable_id:row_id,
                    approvable_type:model_name,
                    action_step_id:action_step_id,
                },
                success: function (data) {
                location.reload();
                },
                error: function (response) {
                },
        });
    }
}
</script>
{{-- @include('inventory.recipe.recipe_js') --}}
@stop