@extends('layouts.metronic')

@section('content')
<div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">
                
                <span class="caption-subject bold uppercase"><i class="fa fa-edit"></i> {{ (!empty($cuisine))?'Editare':'Adăugare' }} Aliment</span>
            </div>            
        </div>

        <div class="panel-body">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="row">
                    <form method="POST" action="{{ route('food.save') }}"> 
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">                
                        
                        @if (! empty($food))    
                            <input type="hidden" name="id" value="{{ $food->id }}">
                        @endif

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="name_ro">Nume RO</label>
                                    <input type="text" class="form-control" name="name_ro" id="name_ro" value="{{ (!empty($food))?$food->name_ro:'' }}" required autofocus>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="name_en">Nume EN</label>
                                    <input type="text" class="form-control" name="name_en" id="name_en" value="{{ (!empty($food))?$food->name_en:'' }}" required autofocus>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="qty_per_buc">Cantitate per bucată</label>
                                    <input type="text" class="form-control" name="qty_per_buc" id="qty_per_buc" value="{{ (!empty($food))?$food->qty_per_buc:'' }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="um_per_buc">Unitate de măsură per bucată</label>
                                    <select id="um_per_buc" name="um_per_buc" class="form-control">
                                        <option value=""></option>
                                        @foreach ($measuring_units as $unit)
                                        <option value="{{ $unit->id }}" {{ (!empty($food) && $food->um_per_buc==$unit->id)?'selected':'' }}>{{ $unit->name }}</option>
                                        @endforeach                                    
                                    </select>
                                </div>
                            </div>
                            
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="calories">Calorii</label>
                                    <input type="number" class="form-control" step="0.1" name="calories" id="calories" value="{{ (!empty($food))?$food->calories:'' }}" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="proteins">Proteine</label>
                                    <input type="number" class="form-control" step="0.1" name="proteins" id="proteins" value="{{ (!empty($food))?$food->proteins:'' }}" required>
                                </div>
                            </div>
                             <div class="col-md-2">
                                 <div class="form-group">
                                    <label for="lipids">Lipide</label>
                                    <input type="number" class="form-control" step="0.1" name="lipids" id="lipids" value="{{ (!empty($food))?$food->lipids:'' }}" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="carbohydrates">Carbohidrati</label>
                                    <input type="number" class="form-control" step="0.1" name="carbohydrates" id="carbohydrates" value="{{ (!empty($food))?$food->carbohydrates:'' }}" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="fibers">Fibre</label>
                                    <input type="number" class="form-control" step="0.1" name="fibers" id="fibers" value="{{ (!empty($food))?$food->fibers:'' }}" required>
                                </div>
                            </div>
                        </div>

                        @if (! empty($food))    
                        <div class="row">
                             <div class="col-md-3">
                                <div class="form-group">
                                    <label for="off_code">Cod OFF (Barcode)</label>
                                    <input type="text" class="form-control" readonly name="off_code" id="off_code" value="{{ (!empty($food))?$food->off_code:'' }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="usda_code">Cod USDA (FDC ID)</label>
                                    <div class="input-group">
                                        
                                        <span class="input-group-btn">
                                            <a role="tab" class="nav-link pull-right" href="" data-toggle="modal" data-target="#myModal">
                                                <button type="button" class="btn-shadow btn btn-danger">                    
                                                        <i class="fa fa-plus"></i>
                                                </button>         
                                            </a>
                                        </span>
                                        
                                        <input type="text" class="form-control" readonly name="usda_code" id="usda_code" value="{{ (!empty($food))?$food->usda_code:'' }}">
                                    </div>
                                </div>                               
                            </div>
                        </div>
                        @endif

                        <div class="form-group">
                            <div class="col-md-6">
                                <a href="{{ route('foods') }}">
                                    <button type="button" class="btn btn-danger">                            
                                        <i class="fa fa-close" aria-hidden="true"></i> Închide
                                    </button>
                                </a>
                            </div>

                            <div class="col-md-6">
                                <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-save" aria-hidden="true"></i> Salvează</button>
                            </div>
                        </div>
                    </form>
                </div>
             </div>   
            <div class="col-md-3"></div>
        </div>

        @if (! empty($food) && $food->nutrients != null)    
            <table id="table2"
                data-toggle="table">
                <caption><h2>Nutrienti</h2></caption>
                <thead>
                <tr>
                    <th>Nume</th>
                    <th>Valoare</th>
                    <th>Unitgate de masura</th>
                </tr>
                </thead>
                <tbody>
                     @foreach ($food->nutrients as $nutrient)
                        <tr class="gradeX odd" role="row">
                            <td> {{ $nutrient->nutrientName }}</td>
                            <td> {{ $nutrient->value }}</td>
                            <td> {{ $nutrient->unitName }}</td>
                            
                        </tr>
                    @endforeach     
                </tbody>
            </table>
        @endif
</div>

@if (! empty($food))    
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" >{{__('Adaugă')}} {{__('Cod USDA')}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <div class="form-group">
                    <table id="table"
                        data-toggle="table"
                        data-search="true"
                        data-ajax="ajaxRequest"
                        data-side-pagination="server"
                        data-pagination="true" >
                        <thead>
                        <tr>
                            <th data-field="description">Nume</th>
                            <th data-field="energy">Energie</th>
                            <th data-field="proteins">Proteine</th>
                            <th data-field="lipids">Lipide</th>
                            <th data-field="fibers">Fibre</th>
                            <th data-field="form__link"></th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
   </div>
</div>
@endif
@endsection

@section('head') 
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
@endsection

@section('scripts')  
@if (! empty($food))    
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script>
    function ajaxRequest(params) {
        $.ajax({
            type: "GET",
            url: "/usda_search?search=" + params.data.search + "&pageSize=" + params.data.limit + "&pageNumber=" + ((params.data.offset / params.data.limit) + 1) + "&food_id=" + {{$food->id}},
            dataType: "json",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            success: function (data) {
                params.success({
                    "rows": data.rows,
                    "total": data.totalRows
                })
            },
            error: function (er) {
                console.log(er);
                params.error(er);
            }
        });
    }

    // @if ($food->usda_code != null)
    // function ajaxRequestNutrients(params) {
    //     $.ajax({
    //             type: "GET",
    //             url: "https://api.nal.usda.gov/fdc/v1/foods/search?api_key=GhTRRQHCYPwDKafGdrTOj39nohlWtqpywgfJfMai&requireAllWords=true&pageSize=10&query=" + {{$food->usda_code}},
    //             dataType: "json",
    //             success: function (data) {
    //                 params.success({
    //                     "rows": data.foods[0].foodNutrients,
    //                     "total": data.totalRows
    //                 })


    //                 // $.each(data.foods, function(k, food) {
                        
                        
    //                 //     $.each(food.foodNutrients, function(k, nutrient) {
    //                 //         //console.log(nutrient);    
    //                 //         $("#nutrientsOl").append("<li class='task'><span>"+ nutrient.nutrientName +"</span></li>")
    //                 //     });

                        
    //                 // });
                    
    //             },
    //             error: function (er) {
    //                 console.log(er);
    //             }
    //     });
    // }
    // @endif

</script>



@endif


@endsection

@section('menuVariables')
    var menuItemName = "menuFoods";
    var submenuItemName = "";
@stop