@extends('layouts.profile')

@section('title')
<title>Calories Calculator | Fitoverfat</title>
@endsection

@section('page_name')
Calories Calculator
@endsection

@section('content')
<!-- 
<h3>Water <span class="float-right"><small>{{$water}}</small></span></h3>
@for($i = 0; $i < $water + 3; $i++)
<div class="water_bottle">
    <a href="#">
        <img src="{{asset('assets/images/water-bottle.png')}}" />
    </a>
</div>
@endfor
<hr /> -->

<form action="{{url('save_calories')}}" method="post" id="calories-form">
    {{csrf_field()}}
    <input type="hidden" name="all_type" value="1" />

    @if($today_calories > 0)
        <h3>Proteins <span class="float-right"><small>{{$calt}} / {{$today_calories}}</small></span></h3>
        <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated {{$progress_bg}}" role="progressbar" 
        aria-valuenow="{{$progress}}" 
        aria-valuemin="0" aria-valuemax="100" style="width: {{$progress}}%"></div>
        </div>
    @else
        <h3>Carbs & Fats <span class="float-right"><small>{{$calt}} / ?</small></span></h3>
        <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="100" 
        aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
        </div>
    @endif

    <div class="table-responsive mt-4">
        <table class="table table-bordered" id="food_types_table">
            <thead class="table-dark">
                <tr>
                    <th colspan="2" style="width:200px;">gms</th>
                    <th style="width:400px;">Quality</th>
                    <th style="width:200px;">Calories</th>
                    <th><button type="button" class="btn btn-dark text-success p-0 btn-sm" id="add_food_type"
                        data-url="{{url('add_food_type')}}"><i class="fas fa-plus-square"></i></button></th>
                </tr>
            </thead>
            <tbody>                   
                @if($all_tt->count() > 0)
                    @foreach ($all_tt->where('type', 1) as $tt)
                        @if($tt->food_info->approve == 1)
                            <tr>
                                <td>
                                    <input type="number" class="form-control" name="qty[]" value="{{$tt->qty}}" />
                                </td>
                                <td class="food_unit" id="food_unit_{{$loop->iteration}}">
                                    {{$tt->food_info->food_qty->unit}}
                                </td>
                                <td>
                                    <select class="form-control select2" name="food[]" data-url="{{url('food_info')}}"
                                    data-num="{{$loop->iteration}}">
                                        <option value="" disabled selected>Choose Food Type</option>
                                        @foreach ($sections->where('type', 1) as $section)
                                            <option value="{{$section->id}}" @if($tt->food == $section->id) selected @endif>
                                                {{$section->title}}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>{{$tt->calorie}}</td>
                                <td>
                                <button type="button" class="btn btn-light btn-sm remove_food_type text-danger p-0"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                        @endif
                    @endforeach

                @endif
            </tbody>
        </table>
    </div>

    <h5><b>Other Proteins</b> <button type="button" class="float-right btn btn-dark btn-sm" id="food_types_others" data-url="{{url('add_food_type')}}"><i class="fas fa-plus-square"></i></button></h5>
    <div id="food_types_table_others" class="mb-2">
        @foreach ($all_tt->where('type', 1) as $tt)
            @if($tt->food_info->approve == 0)
                <div class="other_calorie_cal_food container-fluid">
                    <div class="row">
                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">Title </label>
                            <input type="text" class="form-control m-input" name="title[]" value="{{$tt->food_info->title}}" />
                            <input type="hidden" name="type[]" value="1" />
                        </div>
                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">gms </label>
                            <input type="number" name="gms[]"  class="form-control m-input" value="{{$tt->qty}}" />
                        </div>
                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">Calories Per Unit </label>
                            <input type="number" class="form-control m-input" name="calorie[]" value="{{$tt->food_info->calorie_unit * $tt->food_info->food_qty->qty}}" />
                        </div>

                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">Unit </label>
                            <select class="form-control m-input" name="unit[]">
                                <option value="0">Choose Unit</option>
                                @foreach ($units as $unit)
                                    <option value="{{$unit->id}}" @if($tt->food_info->food_qty->id == $unit->id) selected @endif>{{$unit->title}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-8 form-group m-form__group text-right">
                            <br /><br />
                            <button type="button" class="btn btn-danger btn-sm remove_other_food_type"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
    <div class="form-group row">
        <div id="calories-form-status" class="col-12 col-md-8"></div>
        <div class="col-12 text-right col-md-4">
            <button type="submit" class="btn btn-default">Send</button>
        </div>
    </div>
    <div id="food_counter" count="{{$all_tt->count()}}"></div>
</form>
    <hr />

<form action="{{url('save_calories')}}" method="post" id="calories-form-carbs">
    <input type="hidden" name="all_type" value="2" />
    {{csrf_field()}}
    @if($today_cho_calories > 0)
        <h3>Carbs & Fats <span class="float-right"><small>{{$calt_cho}} / {{$today_cho_calories}}</small></span></h3>
        <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated {{$progress_cho_bg}}" role="progressbar" 
        aria-valuenow="{{$progress_cho}}" 
        aria-valuemin="0" aria-valuemax="100" style="width: {{$progress_cho}}%"></div>
        </div>
    @else
        <h3>Carbs & Fats <span class="float-right"><small>{{$calt_cho}} / ?</small></span></h3>
        <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="100" 
        aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
        </div>
    @endif
    <div class="table-responsive mt-4">
        <table class="table table-bordered" id="food_types_table_carbs">
            <thead class="table-dark">
                <tr>
                    <th colspan="2" style="width:200px;">gms</th>
                    <th style="width:400px;">Quality</th>
                    <th style="width:200px;">Calories</th>
                    <th><button type="button" class="btn btn-dark text-success p-0 btn-sm" id="add_food_type_carbs"
                        data-url="{{url('add_food_type')}}"><i class="fas fa-plus-square"></i></button></th>
                </tr>
            </thead>
            <tbody>                   
                @if($all_tt->count() > 0)
                    @foreach ($all_tt->where('type', 2) as $tt)
                        @if($tt->food_info->approve == 1)
                            <tr>
                                <td>
                                    <input type="number" class="form-control" name="qty[]" value="{{$tt->qty}}" />
                                </td>
                                <td class="food_unit" id="food_unit_{{$loop->iteration}}">
                                    {{$tt->food_info->food_qty->unit}}
                                </td>
                                <td>
                                    <select class="form-control select2" name="food[]" data-url="{{url('food_info')}}"
                                    data-num="{{$loop->iteration}}">
                                        <option value="" disabled selected>Choose Food Type</option>
                                        @foreach ($sections->where('type', 2) as $section)
                                            <option value="{{$section->id}}" @if($tt->food == $section->id) selected @endif>
                                                {{$section->title}}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>{{$tt->calorie}}</td>
                                <td>
                                <button type="button" class="btn btn-light p-0 text-danger btn-sm remove_food_type"><i class="fas fa-trash"></i></button>
                                </td>
                            </tr>
                        @endif
                    @endforeach

                @endif
            </tbody>
        </table>
    </div>
    <h5><b>Other Carbs & Fats</b> <button type="button" class="float-right btn btn-dark btn-sm" id="food_types_others_carbs" data-url="{{url('add_food_type')}}"><i class="fas fa-plus-square"></i></button></h5>
    <div id="food_types_table_others_carbs" class="mb-2">
        @foreach ($all_tt->where('type', 2) as $tt)
            @if($tt->food_info->approve == 0)
                <div class="other_calorie_cal_food container-fluid">
                    <div class="row">
                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">Title </label>
                            <input type="text" class="form-control m-input" name="title[]" value="{{$tt->food_info->title}}" />
                            <input type="hidden" name="type[]" value="2" />
                        </div>
                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">gms </label>
                            <input type="number" name="gms[]"  class="form-control m-input" value="{{$tt->qty}}" />
                        </div>
                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">Calories Per Unit </label>
                            <input type="number" class="form-control m-input" name="calorie[]" value="{{$tt->food_info->calorie_unit * $tt->food_info->food_qty->qty}}" />
                        </div>

                        <div class="col-lg-4 form-group m-form__group">
                            <label class="col-form-label">Unit </label>
                            <select class="form-control m-input" name="unit[]">
                                <option value="0">Choose Unit</option>
                                @foreach ($units as $unit)
                                    <option value="{{$unit->id}}" @if($tt->food_info->food_qty->id == $unit->id) selected @endif>{{$unit->title}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-8 form-group m-form__group text-right">
                            <br /><br />
                            <button type="button" class="btn btn-danger btn-sm remove_other_food_type"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach

    </div>

    <div class="form-group row">
        <div id="calories-form-status-carbs" class="col-12 col-md-8"></div>
        <div class="col-12 text-right col-md-4">
            <button type="submit" class="btn btn-default">Send</button>
        </div>
    </div>
    <div id="food_counter" count="{{$all_tt->count()}}"></div>
</form>
@endsection

@section('scripts')
<script>
$(document).ready(function() { 
    $('body').on('submit', '#calories-form', function(e) {
        e.preventDefault(); 
        $('#calories-form button[type="submit"]').html('<i class="fas fa-spinner fa-pulse mr-3"></i> Send');
        $('#calories-form button[type="submit"]').prop('disabled', true);
        var action = $(this).attr('action');
        var formData = new FormData($(this)[0]);
        $.ajax({
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            url: action,
            error: function(data) {
            $('#calories-form button[type="submit"]').html('Send');
            $('#calories-form button[type="submit"]').prop('disabled', false);
            jQuery.each(data.errors, function(key, value){
                $('#calories-form-status').html('<div class="alert alert-danger"><i class="fas fa-times-circle"></i> '+value+' <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');	
            });
            },
            success: function(data) 
            {
            $('#calories-form button[type="submit"]').html('Send');
            $('#calories-form button[type="submit"]').prop('disabled', false);
            if(data.success)
            {
                location.reload();
            }
            else
            {
                $('#calories-form-status').html('<div class="alert alert-danger"><i class="fas fa-times-circle"></i> '+data.errors+' <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');	
            }
            }
        });
        return false;
    });

    $('body').on('submit', '#calories-form-carbs', function(e) {
        e.preventDefault(); 
        $('#calories-form-carbs button[type="submit"]').html('<i class="fas fa-spinner fa-pulse mr-3"></i> Send');
        $('#calories-form-carbs button[type="submit"]').prop('disabled', true);
        var action = $(this).attr('action');
        var formData = new FormData($(this)[0]);
        $.ajax({
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            url: action,
            error: function(data) {
            $('#calories-form-carbs button[type="submit"]').html('Send');
            $('#calories-form-carbs button[type="submit"]').prop('disabled', false);
            jQuery.each(data.errors, function(key, value){
                $('#calories-form-status-carbs').html('<div class="alert alert-danger"><i class="fas fa-times-circle"></i> '+value+' <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');	
            });
            },
            success: function(data) 
            {
            $('#calories-form-carbs button[type="submit"]').html('Send');
            $('#calories-form-carbs button[type="submit"]').prop('disabled', false);
            if(data.success)
            {
                location.reload();
            }
            else
            {
                $('#calories-form-status-carbs').html('<div class="alert alert-danger"><i class="fas fa-times-circle"></i> '+data.errors+' <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');	
            }
            }
        });
        return false;
    });

    $('body').on('change', 'select[name="food[]"]', function() {
        var action = $(this).attr('data-url');
        var num = $(this).val();
        var x = $(this).attr('data-num');
        $.ajax({
            type: 'POST',
            data: {num: num},
            url: action,
            success: function(data) 
            {
                $("#food_unit_"+x).html(data);	
            }
        });
    });
    $('.select2').select2({placeholder: "Choose Food Type"});
    $('body').on('click', '#add_food_type', function() {
        var pp = makeid(parseInt($('#food_counter').attr('count')));
        $('#food_counter').attr('count', pp + 1);
        var action = $(this).attr('data-url');
        $.ajax({
            type: 'POST',
            data: {pp: pp, type: 1, other: false},
            url: action,
            success: function(data) 
            {
                $('#food_types_table').append(data);	
                $('.select2').select2({placeholder: "Choose Food Type"});
            }
        });
    });
    $('body').on('click', '#food_types_others', function() {
        var pp = makeid(parseInt($('#food_counter').attr('count')));
        $('#food_counter').attr('count', pp + 1);
        var action = $(this).attr('data-url');
        $.ajax({
            type: 'POST',
            data: {pp: pp, type: 1, other: true},
            url: action,
            success: function(data) 
            {
                $('#food_types_table_others').append(data);	
                $('.select2').select2({placeholder: "Choose Food Type"});
            }
        });
    });


    $('body').on('click', '#add_food_type_carbs', function() {
        var pp = makeid(parseInt($('#food_counter').attr('count')));
        $('#food_counter').attr('count', pp + 1);
        var action = $(this).attr('data-url');
        $.ajax({
            type: 'POST',
            data: {pp: pp, type: 2, other: false},
            url: action,
            success: function(data) 
            {
                $('#food_types_table_carbs').append(data);	
                $('.select2').select2({placeholder: "Choose Food Type"});
            }
        });
    });
    $('body').on('click', '#food_types_others_carbs', function() {
        var pp = makeid(parseInt($('#food_counter').attr('count')));
        $('#food_counter').attr('count', pp + 1);
        var action = $(this).attr('data-url');
        $.ajax({
            type: 'POST',
            data: {pp: pp, type: 2, other: true},
            url: action,
            success: function(data) 
            {
                $('#food_types_table_others_carbs').append(data);	
                $('.select2').select2({placeholder: "Choose Food Type"});
            }
        });
    });

    $('body').on('click', '.remove_food_type', function() {
        $(this).parent().parent().remove();	
    });
    $('body').on('click', '.remove_other_food_type', function() {
        $(this).parent().parent().parent().remove();	
    });
    
    function makeid(length) {
        var result           = '';
        var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for ( var i = 0; i < length; i++ ) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }

});
</script>
@endsection