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


    <main>

        <!-- Start Header -->
        <header class="header section">
            <div class="container">
                <div class="item">
                    <div class="row align-items-center">
                        <div class="col-lg-5">
                            <img src="{{asset($banner->image)}}" alt="" class="sec-img wow puff-in-center"/>
                        </div>
                        <div class="col-lg-5">
                            <div class="text-box wow text-focus-in">
                                <h6 class="subtitle fw-bold mb-3 "> 
                                    <img src="{{url('')}}/assets/web/images/logo_circle.png" alt="" class="icon me-3"/> {{__('web.project')}}
                                </h6>
                                <h1 class="title mb-4 fw-bold">{!! $banner->descriptions()->title !!}</h1>
                                <p class="p ">
                                    {!! $banner->descriptions()->description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="vector wow bounce-in-top "/>
        </header>

        <!-- Start section -->
        <section class="packages-sec section" id="packages">
            <div class="container">
                <div class="sec_head text-center mb-5 pb-4">
                    <h5 class="subtitle_sec color-primary mb-3 wow fadeInUp">
                        <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/> {{__('web.packages')}}   
                    </h5>
                    <h1 class="sec_title fw-bold  wow fadeInDown">{{__('web.packages_clients')}}</h1>
                </div>
                <div class="swiper-container pkg_swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach($types as $row)
                            <div class="swiper-slide">
                                <div class="pkg_card wow rotate_ltr">
                                    <div class="icon_box">
                                        <img src="{{asset($row->image)}}" alt="" class="icon"/>
                                    </div>
                                    <div class="card-body">
                                        <h4 class="title fw-bold mb-3"> {{$row->descriptions()->name}} </h4>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
           
            </div>
        </section>

        <!-- Start section -->
        <section class="calorie_calculator section pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 ms-auto">
                        <div class="form_box wow fadeInUp">
                            <div class="sec_head text-center mb-5">
                                <h5 class="subtitle_sec color-primary mb-3">
                                    <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/>  {{ __('web.cal_calories') }}
                                </h5>
                                <h1 class="sec_title fw-bold ">{{ $cal->descriptions()->title }} </h1>
                                <p class="p">
                                    {!! $cal->descriptions()->description !!}
                                </p>
                            </div>
                            <form action="{{$action}}" method="{{$method}}" onsubmit="calCalories(this)">
                                @if($method == 'POST')
                                    @CSRF
                                @endif
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <input class="form-control" name="age" placeholder="{{__('web.age')}}" type="number"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <select name='gender' class="form-control form-select">
                                                <option selected disabled value="">{{__('web.gender')}}</option>
                                                <option value="male" >{{__('web.male')}}</option>
                                                <option value="female" >{{__('web.female')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <input class="form-control" name="tall" placeholder="{{__('web.tall')}}" type="number"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <input class="form-control" name="weight" placeholder="{{__('web.weight')}}" type="number"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <select name="activity_option" class="form-control form-select">
                                                <option selected disabled value="">{{__('web.activity_option')}}</option>
                                                <option value="1.2"> {{__('web.option1')}}</option>
                                                <option value="1.375">{{__('web.option2')}}</option>
                                                <option value="1.55">{{__('web.option3')}}</option>
                                                <option value="1.725">{{__('web.option4')}}</option>
                                                <option value="1.9">{{__('web.option5')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <button class="butn primary_butn py-3 fs-6 px-5 m-auto mt-4">{{__('web.calculate')}}</button>
                                    </div>
                                </div>
                            </form>
                            <div class="calorie_result col-lg-10 mt-5 m-auto">
                                <h3 class="title mb-3">{{__('web.usage_calories')}}</h3>
                                <h1 id="calCalories" class="num color-dark fw-bold mb-2">00.00</h1>
                                <h6 class="subtitle">{{__('web.calorie')}}/ {{__('web.today')}}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset($cal->image)}}" alt="" class="bg"/>
        </section>

        <!-- Start section -->
        @include('web.pages.components.aboutus',['aboutus'=>$aboutus,'check'=>'true'])
        
        <!-- Start section -->
        <section class="about-cards section">
            <div class="container">
                <div class="sec_head text-center mb-5 pb-4">
                    <h5 class="subtitle_sec color-primary mb-3 wow fadeInUp">
                        <img src="{{asset($reason->image)}}" alt="" class="icon "/>{{$reason->descriptions()->title}}
                    </h5>
                    <h1 class="sec_title fw-bold wow fadeInDown">{!! $reason->descriptions()->description !!}</h1>
                </div>
                <div class="inner">
                    <div class="br_100 bg-white row">
                        @foreach($cards as $row)
                            <div class="col-lg-4">
                                <div class="about_card wow zoomIn">
                                    <div class="icon_box mb-4">
                                        <img src="{{asset($row->image)}}" alt="" class="icon"/>
                                    </div>
                                    <h5 class="title mb-3 fw-bold">{{$row->descriptions()->name}}</h5>
                                    <p class="p mb-0">
                                        {!! $row->descriptions()->description !!}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="feedback-sec section">
            <div class="container">
                <div class="sec_head text-center mb-5 pb-4 wow fadeInUp">
                    <h5 class="subtitle_sec color-primary mb-3">
                        <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="icon "/> {!! $review->descriptions()->title !!}
                    </h5>
                    <h1 class="sec_title wow fadeInDown fw-bold ">{!! $review->descriptions()->description !!}</h1>
                </div>
                <div class="row align-items-center">
                    <div class="col-lg-5">
                        <img src="{{asset($review->image)}}" alt="" class="sec-img wow puff-in-center"/>
                    </div>
                    <div class="col-lg-6">
                        <div class="feedback_box wow fadeInUp">
                            <img src="{{url('')}}/assets/web/images/icons/quote.svg" alt="" class="quote_icon mb-5"/>
                            <div class="swiper-container feedback_swiper">
                                <div class="swiper-wrapper pb-5">
                                    @foreach($reviews as $row)
                                        <div class="swiper-slide">
                                        <div class="feedback_card">
                                            <div class="prof_data d-flex align-items-center mb-4">
                                                <img src="{{url('')}}/assets/web/images/logo_circle.png" alt="" class="avatar"/>
                                                <div class="content">
                                                    <h5 class="name fw-bold mb-2">  {{$row->descriptions()->user}}  </h5>
                                                    <p class="job mb-1">{{$row->descriptions()->job}} </p>
                                                </div>
                                            </div>
                                            <p class="p mb-5">
                                                {{$row->descriptions()->description}}
                                            </p>
                                        
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/header-victor-1.svg" alt="" class="pattern wow fadeInLeft"/>
        </section>

        <!-- Start section -->
        <section class="partners-sec section">
            <div class="container">
                <div class="swiper-container partners_swiper wow fadeInUp py-4">
                    <div class="swiper-wrapper pb-5">
                        @foreach($partners as $row)
                            <div class="swiper-slide">
                                <img src="{{asset($row->image)}}" alt="" class="partner_logo"/>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>

                </div>
            </div>
            <!-- Arrows -->
            <!-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
        </section>

        <!-- Start section -->
        @include('web.pages.components.mail')

    </main>

@push('js')
    <script src="{{url('')}}/assets/web/js/custom/caloriesAction.js"></script>
@endpush
    
@stop