@extends('layouts.metronic')

@section('content')
<style>
    #myInput {
  background-image: url('/layout/search.png'); /* Add a search icon to input */
  background-position: 5px 8px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}
    </style>
<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($recipe))?'Editare':'Adăugare' }} Rețetă</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('recipe.save') }}"> 
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">                
                        
                        @if (! empty($recipe))    
                            <input type="hidden" name="id" value="{{ $recipe->id }}">
                        @endif

                        <div class="row">
                            <div class="col-md-9">
                                <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($recipe))?$recipe->name_ro:'' }}" required autofocus>
                                </div>

                                <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($recipe))?$recipe->name_en:'' }}" required>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="name">Timp de pregătire</label>
                                            
                                            <div class="input-group">
                                                <input type="number" class="form-control" name="preparation_time" id="preparation_time" value="{{ (!empty($recipe))?$recipe->preparation_time:'' }}" required>
                                                <span class="input-group-btn">
                                                    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-info">
                                                    minute
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="name">Timp de gătire</label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" name="cooking_time" id="cooking_time" value="{{ (!empty($recipe))?$recipe->cooking_time:'' }}" required>
                                                <span class="input-group-btn">
                                                    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-info">
                                                    minute
                                                    </a>
                                                </span>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="name">Persoane</label>
                                           
                                            <div class="input-group">
                                                <input type="number" class="form-control" name="portions" id="portions" value="{{ (!empty($recipe))?$recipe->portions:'' }}" required>
                                                <span class="input-group-btn">
                                                    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-info">
                                                    porții
                                                    </a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="recipe_type">Categoria rețetei</label>
                                            
                                            <select id="recipe_category" name="recipe_category" class="form-control" required>
                                                @foreach ($recipe_categories as $recipe_category)
                                                    <option value="{{ $recipe_category->id }}" {{ (!empty($recipe) && $recipe->recipe_category_id==$recipe_category->id)?'selected':'' }}>{{ $recipe_category->name_ro }}</option>
                                                @endforeach                                    
                                            </select>
                                            
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="preparation_instructions_ro">Instrucțiuni de preparare RO</label>
                                    <textarea type="text" class="form-control" name="preparation_instructions_ro" id="preparation_instructions_ro" style="height:100px" required>{{ (!empty($recipe))?$recipe->preparation_instructions_ro:'' }}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="preparation_instructions_en">Instrucțiuni de preparare EN</label>
                                    <textarea type="text" class="form-control" name="preparation_instructions_en" id="preparation_instructions_en" style="height:100px" required>{{ (!empty($recipe))?$recipe->preparation_instructions_en:'' }}</textarea>
                                </div>


                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="selectMoment">Tipul mesei</label>

                                            <select class="selectpicker form-control" id="selectMoment" name="selectMoments[]" multiple data-live-search="true" required>
                                                @foreach ($serving_moments as $serving_moment)
                                                    <option value="{{ $serving_moment->id }}" {{ (!empty($recipe) && strpos($recipe->serving_moments, $serving_moment->id.';') !== false)?'selected':'' }}>{{ $serving_moment->name_ro }}</option>
                                                @endforeach                                    
                                            </select>
                                            
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="selectSeason">Sezoanele servirii</label>

                                            <select class="selectpicker form-control" id="selectSeason" name="selectSeasons[]" multiple data-live-search="true" required>
                                                @foreach ($serving_seasons as $serving_season)
                                                    <option value="{{ $serving_season->id }}" {{ (!empty($recipe) && strpos($recipe->serving_seasons, $serving_season->id.';') !== false)?'selected':'' }}>{{ $serving_season->name }}</option>
                                                @endforeach                                    
                                            </select>                                            
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="selectSeason">Țări</label>
                                            <select class="selectpicker form-control" id="selectCountry" name="selectCountries[]" multiple data-live-search="true" required>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->code }}" {{ (!empty($recipe) && strpos($recipe->locations, $country->code.';') !== false)?'selected':'' }}>{{ $country->name }}</option>
                                                @endforeach                                    
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="selectFoodStyle">Stiluri alimentare</label>
                                            <select class="selectpicker form-control" id="selectFoodStyle" name="selectFoodStyles[]" multiple data-live-search="true" required>
                                                @foreach ($food_styles as $style)
                                                    <option value="{{ $style->id }}" {{ (!empty($recipe) && strpos($recipe->food_styles, $style->id.';') !== false)?'selected':'' }}>{{ $style->name_ro }}</option>
                                                @endforeach                                    
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="selectCuisine">Bucătării</label>
                                            <select class="selectpicker form-control" id="selectCuisine" name="selectCuisines[]" multiple data-live-search="true" required>
                                                @foreach ($cuisines as $cuisine)
                                                    <option value="{{ $cuisine->id }}" {{ (!empty($recipe) && strpos($recipe->cuisines, $cuisine->id.';') !== false)?'selected':'' }}>{{ $cuisine->name_ro }}</option>
                                                @endforeach                                    
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="recipe_type">Tipul rețetei</label>
                                            
                                            <select id="recipe_type" name="recipe_type" class="form-control" required>
                                                @foreach ($recipe_types as $recipe_type)
                                                    <option value="{{ $recipe_type->id }}"  {{ (!empty($recipe) && $recipe->recipe_type_id==$recipe_type->id)?'selected':'' }}>{{ $recipe_type->name_ro }}</option>
                                                @endforeach                                    
                                            </select>
                                            
                                        </div>
                                    </div>

                                    

                                    
                                   
                                </div>
                                
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="name">Imagine</label>                                    
                                    <div class="vertical-input-group">
                                        <span class="input-group" style="width:100px;">
                                            <a id="lfmBackground" data-input="thumbnailBackground" data-preview="holderBackground" class="btn btn-primary" style="width:300px;">
                                            <i class="fa fa-file"></i> Alege
                                            </a>
                                        </span>
                                        <img id="holderBackground" class="input-group" 
                                            src="{{ (!empty($recipe))?$recipe->picture:asset('layout/no-image.jpg') }}" 
                                            style="width:300px;" required/>
                                        <input id="thumbnailBackground" class="form-control" type="text" name="picture" value="{{ (!empty($recipe))?$recipe->picture:asset('layout/no-image.jpg') }}" style="height:0px;opacity:0;cursor: context-menu;"  required >
                                        
                                    </div>
                                </div>
                            </div>
                        </div>

                        

                        

                        
                           
                        

                        <div class="form-group">
                            <div class="col-md-6">
                                <a href="{{ route('recipes') }}">
                                    <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>

                <br>
                @if (!empty($recipe))
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label><b>Total Energy: </b></label>
                                <span>{{ $recipe->total_energy }}</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label><b>Procent Proteine: </b></label>
                                <span>{{ $recipe->procent_protein }}</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label><b>Procent Carbohidrați: </b></label>
                                <span>{{ $recipe->procent_carbo }}</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label><b>Procent Grăsimi: </b></label>
                                <span>{{ $recipe->procent_lipid }}</span>
                            </div>
                        </div>
                    </div>
                    @include('recipe_edit_food')
                @endif
                
                <br>
                @if (!empty($recipe))
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" id="myInput" onkeyup="searchFunction()" placeholder="Cauta dupa ingrediente..">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered table-hover order-column" id="itemsTbale">
                            <thead>
                                <tr>
                                    <th>Nume</th>
                                    <th>Calorii</th>
                                    <th>Proteine</th>
                                    <th>Lipide</th>
                                    <th>Carbohidrati</th>
                                    <th style="width:600px;vertical-align: middle;"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                @endif
             </div>   
            <div class="col-md-3"></div>
        </div>
        
</div>



@endsection

@section('head')  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
@endsection

@section('scripts')  
<script src="/vendor/laravel-filemanager/js/lfm.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script>
    

    @if (!empty($recipe))
    $(document).ready(function() {
        $.ajax({
            type:'POST',
            url:"{{ route('search.recipe') }}",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            success:function(data){
                var trHTML = '';
                $.each(data, function (i, item) {
                    console.log(item.generic_name);
                    trHTML += '<tr><td style="vertical-align:middle">' + item.name_ro +
                               '</td><td style="vertical-align:middle">' + item.calories +
                               '</td><td style="vertical-align:middle">' + item.proteins +
                               '</td><td style="vertical-align:middle">' + item.lipids +
                               '</td><td style="vertical-align:middle">' + item.carbohydrates +
                               '</td><td>'+
                               '<form method="POST" action="{{ route("recipe.add.food", $recipe->id) }}">' +
                               '   <input type="hidden" name="_token" value="{{ csrf_token() }}">' +
                               '   <input type="hidden" name="id" value="'+ item.id +'">'+

                               '<div class="row">'+
                               '    <div class="col-md-4">'+
                               '        <div class="form-group">'+
                               '             <label for="name">Cantitate</label>'+
                               '             <input type="number" class="form-control" name="quantity" id="quantity" required>'+
                               '        </div>'+
                               '     </div>'+
                               '    <div class="col-md-4">'+
                               
                               '        <div class="form-group">'+
                                '            <label for="name">Unitate de măsură</label>'+
                                '            <select id="um" name="um" class="form-control" required>'+
                                                @foreach ($measuring_units as $unit)
                                                    '<option value="{{ $unit->id }}"}}>{{ $unit->name }}</option>'+
                                                @endforeach                                    
                                '            </select>'+
                                '        </div>'+

                               '     </div>'+                               
                               '    <div class="col-md-4">'+
                               '        <input type="submit" value="Adauga"  style="vertical-align:middle;  display: table-cell;">' +
                               '     </div>'+
                               '</div>'+
                               '</form>' +
                               '</td></tr>';
                });
                $('#itemsTbale').append(trHTML);
            }
        });
    });


    function searchFunction () {
        
        // Declare variables
        $('#itemsTbale').empty();
        var termen = document.getElementById('myInput').value;
        var myKeyVals = { "termen": termen};

        $.ajax({
            type:'POST',
            url:"{{ route('search.recipe') }}",
            data: myKeyVals,
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            success:function(data){
                var trHTML = '<thead><tr>' +
                                    '<th>Nume</th>' +
                                    '<th>Calorii</th>' +
                                    '<th>Proteine</th>' +
                                    '<th>Lipide</th>' +
                                    '<th>Carbohidrati</th>' +
                                    '<th style="width:600px;vertical-align: middle;"></th></tr></thead>';
                $.each(data, function (i, item) {
                    console.log(item.generic_name);
                    trHTML += '<tr><td style="vertical-align:middle">' + item.name_ro +
                                '</td><td style="vertical-align:middle">' + item.calories +
                               '</td><td style="vertical-align:middle">' + item.proteins +
                               '</td><td style="vertical-align:middle">' + item.lipids +
                               '</td><td style="vertical-align:middle">' + item.carbohydrates +
                               '</td><td>'+
                               '<form method="POST" action="{{ route("recipe.add.food", $recipe->id) }}">' +
                               '   <input type="hidden" name="_token" value="{{ csrf_token() }}">' +
                               '   <input type="hidden" name="id" value="'+ item.id +'">'+

                               '<div class="row">'+
                               '    <div class="col-md-4">'+
                               '        <div class="form-group">'+
                               '             <label for="name">Cantitate</label>'+
                               '             <input type="number" class="form-control" name="quantity" id="quantity" required>'+
                               '        </div>'+
                               '     </div>'+
                               '    <div class="col-md-4">'+
                               
                               '        <div class="form-group">'+
                                '            <label for="name">Unitate de măsură</label>'+
                                '            <select id="um" name="um" class="form-control" required>'+
                                                @foreach ($measuring_units as $unit)
                                                    '<option value="{{ $unit->id }}"}}>{{ $unit->name }}</option>'+
                                                @endforeach                                    
                                '            </select>'+
                                '        </div>'+

                               '     </div>'+                               
                               '    <div class="col-md-4">'+
                               '        <input type="submit" value="Adauga"  style="vertical-align:middle;  display: table-cell;">' +
                               '     </div>'+
                               '</div>'+
                               '</form>' +
                               '</td></tr>';
                });
                $('#itemsTbale').append(trHTML);
            }
        });    
    }

    function addFood(recipe_id, food_id){        
        //alert(food_id);
    }
    @endif
    $('#lfmBackground').filemanager('images'); 

    //$('#selectMoment').selectpicker();
    //$('#selectSeason').selectpicker();    
</script>
@endsection

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