@extends('aron-layouts.main')

@section('content')

    <!-- Parent Section -->
    <section class="page_content_parent_section" id="vueapp">

    @include('aron-layouts.includes._header')

    <!-- Half Section -->

        <section class="food-company-section big_padding" id="about">

            <div class="container container_big">

                {{--                <p class="default_small_heading raleway text-center blue_color font_200">Check It</p>--}}

                <h2 class="default_section_heading text-center">

                    <span class="font_200"> About Our</span>
                    Diet Box
                </h2>

                <hr class="default_divider default_divider_blue default_divider_big">

                <div class="col-md-4">

                    <div class="row">

                        <div class="col-sm-12">

                            <div class="expertise_block text-center margin_default_bottom_big wow slideInLeft"
                                 style="visibility: visible; animation-name: slideInLeft;">

                                <i class="fa fa-send pink_color"></i>
                                <h3 class="small_heading_navy text-center raleway h3_pink font_600"> Our Mission</h3>
                                <p class="default_text text-center open_sans default_text_light">
                                    We are passionate to help you with weight loss in order to get the best shape ever
                                    and to live healthy life with calculated nutritious food.
                                </p>
                            </div>

                        </div>

                        <div class="col-sm-12">

                            <div class="expertise_block text-center margin_after_tab wow slideInLeft"
                                 style="visibility: visible; animation-name: slideInLeft;">

                                <i class="fa fa-calendar pink_color"></i>

                                <h3 class="small_heading_navy text-center raleway h3_pink font_600"> Our Values</h3>

                                <p class="default_text text-center open_sans default_text_light">
                                    Our customer's are our top priority and we are determined to provide top quality and
                                    healthy food
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-md-4 margin_after_tab">

                    <div class="food_about_bg">

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="expertise_block text-center margin_default_bottom_big wow slideInLeft"
                                 style="visibility: visible; animation-name: slideInLeft;">
                                <i class="fa fa-phone pink_color"></i>
                                <h3 class="small_heading_navy text-center raleway h3_pink font_600"> 24/7 Help
                                    Support</h3>

                                <p class="default_text text-center open_sans default_text_light">
                                    Our team of nutritionist is available 24/7 for customer queries and advise.
                                    you may reach us on 0332 222 3429
                                </p>
                            </div>
                        </div>
                        <div class="col-sm-12">

                            <div class="expertise_block text-center margin_after_tab wow slideInLeft"
                                 style="visibility: visible; animation-name: slideInLeft;">

                                <i class="fa fa-mobile pink_color" style="margin-bottom: 10px;"></i>

                                <h3 class="small_heading_navy text-center raleway h3_pink font_600">Our App</h3>

                                <p class="default_text text-center open_sans default_text_light">
                                    With our app you will be able to track all nutrition and calories which you have
                                    consumed,
                                    view ingredients, meal calendar, step by step status from cooking to your door
                                    delivery
                                    and many more <a href="https://play.google.com/store/apps/details?id=com.dietbox"
                                                     target="_blank">Download Android App</a>
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <section class=" big_padding customer_feedback_section" data-parallax="scroll">

            <div class="container">

                <div class="row">

                    <div class="col-md-3 col-sm-6 margin_after_tab text-center">

                        <div class="stats_section_inner">

                            <i class="fa fa-smile-o white_color stats_section_icon text-center" aria-hidden="true"></i>

                            <h3 class="default_section_heading white_color raleway number-scroll">  </h3>

                            <p class="small_heading_navy white_color open_sans font_200">Happy Customer</p>

                        </div>

                    </div>

                    <div class="col-md-3 col-sm-6 margin_after_tab text-center">

                        <div class="stats_section_inner">

                            <i class="fa fa-cutlery white_color stats_section_icon text-center" aria-hidden="true"></i>

                            <h3 class="default_section_heading white_color raleway number-scroll">  </h3>

                            <p class="small_heading_navy white_color open_sans font_200">Dishes Served</p>

                        </div>

                    </div>

                    <div class="col-md-3 col-sm-6 margin_after_tab text-center">

                        <div class="stats_section_inner">

                            <i class="fa fa-spoon white_color stats_section_icon text-center" aria-hidden="true"></i>

                            <h3 class="default_section_heading white_color raleway number-scroll">  </h3>

                            <p class="small_heading_navy white_color open_sans font_200">Active Recipes</p>

                        </div>

                    </div>

                    <div class="col-md-3 col-sm-6 margin_after_tab text-center">

                        <div class="stats_section_inner">

                            <i class="fa fa-balance-scale white_color stats_section_icon text-center" aria-hidden="true"></i>

                            <h3 class="default_section_heading white_color raleway number-scroll">  </h3>

                            <p class="small_heading_navy white_color open_sans font_200">AVG Weight Loss</p>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <!-- Skill Heading Section -->
        <section class="combined_skills_section small_padding">
            <section class="skill_section">
                <div class="container">
                    <div class="skill_section_inner">
                        <h2 class="default_section_heading text-center">
                            <span class="font_200">
                                What is
                            </span>
                            Dietbox
                            <span class="font_200">
                                ?
                            </span>
                        </h2>
                        <hr class="default_divider default_divider_blue default_divider_big">
                    </div>
                </div>
            </section>
            <!-- /Skill Section -->

            <section class="circle_pie_section">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="expertise_section_inner">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="expertise_block text-center margin_after_tab wow slideInLeft">

                                            <h3 class="small_heading_navy text-center raleway h3_pink font_400">No need
                                                to shop or chop</h3>
                                            <p class="default_text text-center open_sans default_text_light">
                                                You will not need to go near kitchen! No need of diet plan, We do it
                                                all!
                                            </p>

                                        </div>

                                    </div>

                                    <div class="col-md-4">
                                        <div class="expertise_block text-center margin_after_tab wow fadeInUp">
                                            <h3 class="small_heading_navy text-center raleway h3_pink font_400">Weight
                                                loss</h3>
                                            <p class="default_text text-center open_sans default_text_light">
                                                At DietBox every diet food is prepared with healthy fats, proteins and
                                                complex carbohydrates resulting in long-term weight loss.
                                            </p>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="expertise_block text-center wow slideInRight">
                                            <h3 class="small_heading_navy text-center raleway h3_pink font_400">Healthy
                                                and natural</h3>
                                            <p class="default_text text-center open_sans default_text_light">
                                                At DietBox, meals don’t contain any refined carbohydrates,
                                                sugars or chemical food preservatives.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </section>
        <!-- /Circel Js Skill Section -->
        <!-- Pricing Table -->
        <section class="pricing_section big_padding bg_grey" id="pricing_table">

            <div class="container">

                <div class="pricing_table_section" id="responseMsg">

                    <p class="default_text raleway text-center default_small_heading blue_color font_200">Our Promotion
                        is Live</p>

                    <h2 class="default_section_heading text-center">

                            <span class="font_200">
                                Package

                            </span>
                        Pricing
                    </h2>
                    <div class="text-center">
                        <span class="text-success text-left couponsuccess" role="alert"
                              style="display: none;">
                        </span>
                        <span class="text-danger text-left couponerror" role="alert"
                              style="display: none;">
                        </span>
                    </div>
                    <hr class="default_divider default_divider_blue default_divider_big">

                    <!--                    -->                    @if($showRealPrice)
                        @foreach($mealplans as $mealplan)

                            <div class="col-sm-4" style="margin-bottom: 10px">
                                <div class="pricing_table_column wow slideInLeft @if($mealplan->title == 'Assassinate Weight') {{'blue_price fadeInUpBig'}} @endif">

                                    <h3 class="small_heading_navy raleway @if($mealplan->title == 'Assassinate Weight') {{'white_color'}} @endif"
                                    >{{$mealplan->title}}</h3>

                                    <div class="price">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <h2 class="open_sans font_400 @if($mealplan->title != 'Assassinate Weight') {{'pink_color'}} @endif"
                                                    style="font-size:20px;"><span
                                                            class="dollar raleway"
                                                            style="left: -25px; top: 0px;">Rs&nbsp;</span>{{number_format($mealplan->amount, 0, '', ',')}}
                                                </h2>
                                            </div>
                                            <div class="col-xs-8">
                                                <p>{{$mealplan->description}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="packages">
                                        <li><i class="fa fa-check pink_color"
                                               aria-hidden="true"></i> {{$mealplan->availDays}} Days
                                        </li>
                                        <li><i class="fa fa-check pink_color"
                                               aria-hidden="true"></i>{{$mealplan->availCalories}} Calories
                                        </li>
                                        <li>
                                            <i class="fa {{($mealplan->isBreakfast)?"fa-check pink_color":"fa-close text-danger"}}"
                                               aria-hidden="true"></i>Breakfast
                                        </li>
                                        <li>
                                            <i class="fa {{($mealplan->isLunch)?"fa-check pink_color":"fa-close text-danger"}}"
                                               aria-hidden="true"></i>Lunch
                                        </li>
                                        <li>
                                            <i class="fa {{($mealplan->isSnacks)?"fa-check pink_color":"fa-close text-danger"}}"
                                               aria-hidden="true"></i>Snacks (Optional)
                                        </li>
                                        <li>
                                            <i class="fa {{($mealplan->isDinner)?"fa-check pink_color":"fa-close text-danger"}}"
                                               aria-hidden="true"></i>Dinner
                                        </li>
                                        <li>
                                            <i class="fa fa-check pink_color"
                                               aria-hidden="true"></i>
                                            <a href="{{route("public.packageMenu",$mealplan->slug)}}"><span
                                                        class="pink_color">Package Menu</span></a>
                                        </li>
                                    </ul>

                                    <div class="pricing_button">
                                        {{--                                            <a href="{{route("cart.addMealPlan",$mealplan->id)}}"--}}
                                        <a mealplanId="{{$mealplan->id}}"
                                           class="@if($mealplan->title == 'Assassinate Weight') {{'bg_white bg_before_pink navy_blue'}} @else {{"bg_pink bg_before_navy"}} @endif button button_default_style open_sans2">Add
                                            To Cart
                                        </a>
                                    </div>
                                    <br>
                                    {{--                                        <div class="pricing_button">--}}
                                    {{--                                            <a class="bg_before_blue bg_before_pink navy_blue  button open_sans" href="{{route("public.packageMenu",$mealplan->id)}}">Package Menu</a>--}}
                                    {{--                                        </div>--}}
                                </div>
                            </div>
                        @endforeach
                    @endif

                </div>

            </div>

        </section>
        <!-- /Pricing Table -->
        <!-- section how it work -->
        <section class="timeline_section big_padding parallax-window" id="how-it-works" data-parallax="scroll">

            <div class="container">

                <h3 class="default_section_heading raleway white_color text-center"><span class="font_200"> How </span>
                    it Works </h3>

                <hr class="default_divider default_divider_big default_divider_white text-center">

                <div class="row">

                    <div class="col-xs-12  wow fadeInRight">

                        <div class="timline-year">

                            <h3 class="open_sans">1</h3>

                        </div>

                        <ul class="timeline">

                            <li class=" wow fadeInLeft  " data-wow-duration="500ms">

                                <div class="timeline-badge"><a><i class="fa fa-circle"></i></a></div>

                                <div class="timeline-panel">

                                    <div class="timeline-heading">

                                        <h4 class="small_heading_navy raleway font_400 white_color">Account
                                            Creation</h4>

                                    </div>

                                    <div class="timeline-body">

                                        <p class="open_sans font_400 white_color ">
                                            <a href="{{URL::route("public.index")}}#contact-form" class="scroll">Contact
                                                Us here</a>
                                            our representative will call you and explain all the process according to
                                            your need.
                                            you can also reach us by dialing 0332 222 3429
                                        </p>
                                    </div>
                                </div>

                            </li>


                            <li class="clearfix no-float"></li>

                        </ul>

                        <div class="timline-year">

                            <h3 class="open_sans">2</h3>

                        </div>

                        <ul class="timeline">


                            <li class="timeline-inverted wow fadeInRight  " data-wow-duration="900ms">

                                <div class="timeline-badge"><a><i class="fa fa-circle invert"></i></a></div>

                                <div class="timeline-panel">

                                    <div class="timeline-heading">
                                        <h4 class="small_heading_navy raleway font_400 white_color">Payment
                                            Confirmation</h4>
                                    </div>

                                    <div class="timeline-body">

                                        <p class="open_sans font_400 white_color ">After finalizing the package you can
                                            make a payment via bank transfer,
                                            or ask our representative for cash on delivery
                                        </p>
                                        <p class="wow slideInRight"><strong>Account Name : </strong>DIET BOX</p>
                                        <p class="wow slideInRight"><strong>Bank : </strong>Meezan Bank Limited</p>
                                        <p class="wow slideInRight"><strong>Account Num : </strong>01390104137327

                                    </div>
                                </div>

                            </li>

                            <li class="clearfix no-float"></li>

                        </ul>

                        <div class="timline-year">

                            <h3 class="open_sans">3</h3>

                        </div>

                        <ul class="timeline">

                            <li class="wow fadeInLeft  " data-wow-duration="500ms">

                                <div class="timeline-badge"><a><i class="fa fa-circle"></i></a></div>

                                <div class="timeline-panel">

                                    <div class="timeline-heading">

                                        <h4 class="small_heading_navy raleway font_400 white_color">APP Login
                                            Credentials</h4>

                                    </div>

                                    <div class="timeline-body">

                                        <p class="open_sans font_400 white_color">
                                            You will be sent login credentials for app through which you can login into
                                            your android or IOS app.
                                        </p>
                                        <p class="open_sans font_400 white_color">
                                            With our app it will be easy for you to track all your nutrition, calories,
                                            meal calendar, track your food status and many more.
                                        </p>

                                    </div>
                                </div>

                            </li>

                            <li class="timeline-inverted wow fadeInRight  " data-wow-duration="900ms">

                                <div class="timeline-badge"><a><i class="fa fa-circle invert"></i></a></div>

                                <div class="timeline-panel">

                                    <div class="timeline-heading">

                                        <h4 class="small_heading_navy raleway font_400 white_color">Start Food
                                            Delivery</h4>

                                    </div>

                                    <div class="timeline-body">

                                        <p class="open_sans font_400 white_color ">We will start delivering your food at
                                            your listed address.
                                        </p>

                                    </div>
                                </div>

                            </li>

                            <li class="clearfix no-float"></li>

                        </ul>

                    </div>

                </div>

            </div>

        </section>
        <!-- /section about web portal -->
        <!-- Blog Section -->
        <section class="blog_section small_padding" id="blog">

            <div class="container">

                <p class="default_text raleway text-center default_small_heading blue_color font_200">Read the News</p>

                <h2 class="default_section_heading text-center">

                            <span class="font_200">

                                Our

                            </span>

                    Latest

                    <span class="font_200">

                                Blogs

                            </span>

                </h2>

                <hr class="default_divider default_divider_blue default_divider_big">

                <div class="blog_slider_main swiper-container">

                    <div class="swiper-wrapper">

                        <div class="swiper-slide">

                            <div class="blog_slide wow slideInLeft">

                                <a href="https://blog.dietbox.pk/latest-trend-in-diet/" class="anchor_style_default">

                                    <h3 class="small_heading_navy raleway center_on_mobile font_400">Latest trend in
                                        diet</h3>

                                </a>

                                <p class="default_text default_text_light open_sans center_on_mobile">Sep 24, 2019</p>

                                <div class="blog_img">

                                    <img src="#"
                                         data-src="aron-assets/food-resturant-assets/images/food-blog-post-1.jpg"
                                         alt="blog_img">

                                </div>

                                <p class="default_text open_sans center_on_mobile">

                                    In between the ever increasing trend to get the perfect beach body during the summer
                                    and the ever excessive need to develop healthy eating habits for a healthier life

                                </p>

                            </div>

                        </div>

                        <div class="swiper-slide">

                            <div class="blog_slide wow fadeInDownBig">

                                <a href="https://blog.dietbox.pk/health-and-healthy-food/" class="anchor_style_default">

                                    <h3 class="small_heading_navy raleway center_on_mobile font_400">Health and Healthy
                                        Food</h3>

                                </a>

                                <p class="default_text default_text_light open_sans center_on_mobile">Sep 24, 2019</p>

                                <div class="blog_img">

                                    <img src="#"
                                         data-src="aron-assets/food-resturant-assets/images/food-blog-post-2.jpg"
                                         alt="blog_img">

                                </div>

                                <p class="default_text open_sans center_on_mobile">

                                    Healthy food is directly proportional to healthy body and healthy mind. A persons’s
                                    general health is determined by the consumption of his food

                                </p>

                            </div>

                        </div>

                        <div class="swiper-slide">

                            <div class="blog_slide wow slideInRight">

                                <a href="https://blog.dietbox.pk/why-diet-is-a-need-nowadays/"
                                   class="anchor_style_default">

                                    <h3 class="small_heading_navy raleway center_on_mobile font_400">Why Diet is a Need
                                        Nowadays</h3>

                                </a>

                                <p class="default_text default_text_light open_sans center_on_mobile">Sep 6, 2019</p>

                                <div class="blog_img">

                                    <img src="#"
                                         data-src="aron-assets/food-resturant-assets/images/food-blog-post-3.jpg"
                                         alt="blog_img">

                                </div>

                                <p class="default_text open_sans center_on_mobile">

                                    A balanced diet is basically the means to maintain or improve overall health. A
                                    healthy diet provides the body with essential nutrition: fluid, macronutrients,
                                    micronutrients, and adequate calories

                                </p>

                            </div>

                        </div>

                    </div>

                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>

                </div>

            </div>

        </section>
        <!-- /Blog Section -->

        <!-- Customer Review Slider -->

        @if($reviews->count())
            <section class="customer_feedback_section  small_padding text-center" id="review">
                <div class="container">
                    <div class="feedaback_inner">
                        <h2 class="default_section_heading text-center white_color">
                            <span class="font_200">
                                What
                            </span>
                            People
                            <span class="font_200">
                                Say ?
                            </span>
                        </h2>

                        <hr class="default_divider default_divider_white default_divider_small">

                        <div class="swiper-container customer_feedback_slider white_pagination">

                            <div class="swiper-wrapper">
                                @foreach($reviews as $review)
                                    <div class="swiper-slide">
                                        <p class="customer_feedback_text white_color open_sans default_text font_200">{{$review->comment}}</p>
                                        <p class="customer_feedback_name white_color open_sans default_small_heading font_600">{{$review->name}}
                                            - Regular Customer</p>
                                    </div>
                                @endforeach

                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-next fa fa-angle-right hidden-sm hidden-xs"></div>
                            <div class="swiper-button-prev fa fa-angle-left hidden-sm hidden-xs"></div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
        <section class="contact_form_section" id="contact-form">
            <leads-form-component></leads-form-component>
        </section>
        <section>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d452.74100583069793!2d67.04498201237855!3d24.797917253868203!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33d24ff40d70f%3A0x9826991bb6b83d95!2sDietBox!5e0!3m2!1sen!2s!4v1615805150092!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </section>
        @include('aron-layouts.includes._footer')

    </section>
@endsection

@section("script")
    <script>
        $(document).ready(function () {
            $('.open_sans2').click(function () {
                var mealplanId = $(this).attr('mealplanId');
                if (!mealplanId) return
                $.ajax({
                    dataType: "json",
                    url: "{{route("cart.addMealPlan")}}",
                    method: "POST",
                    data: {mealplanId: mealplanId, _token: "{{ csrf_token() }}"},
                    success: function (response) {
                        if (response.status) {
                            $('.cartQuantity').show("fade");
                            $('.cartQuantity').html(response.cartQuantity);
                            $.notify(response.message, {
                                position: "top right",
                                className: "success",
                                autoHideDelay: 10000
                            });
                        } else {
                            $('.cartQuantity').show("fade");
                            $('.cartQuantity').html(response.cartQuantity);
                            $.notify(response.message, {
                                position: "top right",
                                className: "error",
                                autoHideDelay: 10000
                            });
                        }
                    }
                });
            });
        });

    </script>

@endsection