@extends('web.layouts.main')
@section('content')

<div class="page-heading">
                <div class="bread">
                    <h4> {{__('web.calcalories')}} </h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}">{{__('web.home')}}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('web.calories')}} </li>
                        </ol>
                    </nav>
                </div>
            </div>  
        <main>
            <!--start calorie-calculator-->
            <section class="calorie-calculator">
                <div class="container">
                    <div class="inner">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="form-container">
                                    <h3 class="mb-5">{{__('web.calcalories')}}</h3>
                                    <form id="formcontacts" onsubmit="contacts()" method="post"  action="{{url(getCurrentLocale().'/calcalories')}}">
                                       @CSRF
                                        <div class="row">
                                            <div class="col-2">
                                                <label>{{__('web.gender')}}</label>
                                            </div>
                                            <div class="col-10">
                                                <div class="form-group ">
                                                    <select name="gender" class="form-control">
                                                        <option value="male">{{__('web.male')}}</option>
                                                        <option value="female">{{__('web.female')}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <label>{{__('web.age')}}</label>
                                            </div>
                                            <div class="col-10">
                                                <div class="form-group ">
                                                    <input name="age" class="form-control" placeholder="{{__('web.age')}}">
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <label>{{__('web.weigth')}}</label>
                                            </div>
                                            <div class="col-10">
                                                <div class="form-group ">
                                                    <input name="weight" class="form-control" placeholder="{{__('web.kg')}}">
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <label>{{__('web.length')}}</label>
                                            </div>
                                            <div class="col-10">
                                                <div class="form-group ">
                                                    <input name="height" class="form-control" placeholder="{{__('web.cm')}}">
                                                </div>
                                            </div>
                                            <div class="col-2">
                                                <label>{{__('web.activity')}}</label>
                                            </div>
                                            <div class="col-10">
                                                <div class="form-group ">
                                                    <select name="activity_option" class="form-control">
                                                        <option value="1"> {{__('web.option1')}}</option>
                          <!--  <option value="2">{{__('web.option2')}}</option>
                            <option value="3">{{__('web.option3')}}</option>
                            <option value="4">{{__('web.option4')}}</option>
                            <option value="5">{{__('web.option5')}}</option>
                            <option value="6">{{__('web.option6')}}</option>
                            <option value="7">{{__('web.option7')}}</option> -->
    
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button class="bg-butn"><span>{{__('web.calculate')}}</span></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="calorie-result">
                                    <span class="calorie-span">{{__('web.perday')}}</span> 
                                    <span class="calorie-result-span"id="result">00.00</span> 
                                    <span class="per-day">{{__('web.calorie')}} /{{__('web.day')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
 @push('js')
   <script>
        function contacts(){
        event.preventDefault(); 
       var action = $('#formcontacts').attr('action');
       var urls = action;
       var dataform = $('#formcontacts').serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           
              $('#result').html(data);
          }
       
        })
        }
    </script>
   @endpush
   
@stop