@extends('layouts.metronic')

@section('content') 

<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption font-dark">
            <i class="fa fa-table"></i>
            <span class="caption-subject bold uppercase">Alimente</span>
        </div>            
    </div>

    <div class="portlet-body">
        <div class="table-toolbar">
            <div class="row">
                <div class="col-md-6">
                    <div class="btn-group">
                        <a href="{{ route('food.add') }}" >
                        <button id="sample_editable_1_new" class="btn sbold green"> Adaugă aliment
                            <i class="fa fa-plus"></i>
                            
                        </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>


        <table id="table"
            data-toggle="table"
            data-search="true"
            data-ajax="ajaxRequest"
            data-side-pagination="server"
            data-pagination="true">
            <thead>
            <tr>
                <th data-field="name_link">Nume</th>
                <th data-field="off_link">Cod OFF</th>
                <th data-field="usda_link">Cod USDA</th>                
                <th data-field="calories">Calorii</th>
                <th data-field="proteins">Proteine</th>
                <th data-field="lipids">Lipide</th>
                <th data-field="carbohydrates">Carbohidrati</th>
                <th data-field="fibers">Fibre</th>
            </tr>
            </thead>
        </table>
    </div>
</div>






@endsection

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

@section('scripts')  
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script>
    function ajaxRequest(params) {
        console.log("2");

        $.ajax({
            type: "GET",
            url: "foods?search=" + params.data.search + "&offset=" + params.data.offset + "&limit=" + params.data.limit,
            dataType: "json",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            success: function (data) {
                console.log(data);
                params.success({
                    "rows": data.rows,
                    "total": data.totalRows
                })
            },
            error: function (er) {
                console.log(er);
                params.error(er);
            }
        });
    }
</script>
@endsection

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