@extends('web.layouts.container')

@section('content')
    <section class="categ-sec section">
        <div class="container">
            <p class="categ_det fs-4 text-center col-lg-8 m-auto mb-5 mt-4">{{$categoryPage->description}} </p>
            <div class="row justify-content-center">
                @foreach($categories as $category)
                    <div class="col-md-4">
                        <a>
                            <div class="categ_card">
                                <div class="img-box">
                                    <img src="{{asset($category->image)}}" alt="" class="sec-img"/>
                                </div>
                                <h6 class="title text-center"><b>{{$category->currentDescription->name}}</b></h6>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- Start falvors-sec -->
    <section class="falvors-sec falvors-pg  section">
        <div class="container">
            <h1 class="title mb-4">{{__('articles.our_flavors')}}</h1>
            <div class="row">
                @if(count($flavors))
                    @foreach($flavors as $flavor)
                        <div class="col-lg-4 col-md-6">
                            <a href="#">
                                <div class="flavor_card">
                                    <img src="{{asset($flavor->image)}}" alt="" class="sec-img"/>
                                    <h1 class="title text-white"><b>{{$flavor->name}}</b></h1>
                                    <div class="hvr-content">
                                        <h1 class="title text-white"><b>{{$flavor->name}}</b></h1>
                                        <p class="p text-white col-lg-10 m-auto my-0">{{$flavor->description}}</p>
                                        <div class="profile_data d-flex align-items-enter mt-4 w-100">
                                            <img src="{{asset($flavor->flavorTypeImage)}}" alt="" class="avatar_img me-2"/>
                                            <h6 class="prof_name text-white mb-0 mt-1">{{$flavor->flavorTypeName}}</h6>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                @endif
                <div class="col-md-12">
                    <a href="{{route('ourProduct')}}" class="butn border_butn m-auto mt-5 px-4"><b>{{__('articles.view_all_flavors')}}</b></a>
                </div>

            </div>
        </div>
    </section>
    <!-- Start about-sec -->
    <section class="about-sec section">
        <div class="container pt-5">
            <div class="col-md-6 ms-auto mt-5 pb-5">
                <div class="text-box">
                    <h1 class="title mb-5">{{$whyUsPage->title}}</h1>
                    <ul class="custom_ul col-lg-10">
                        @if(is_array($whyUsPage->meta) && count($whyUsPage->meta))
                            @foreach($whyUsPage->meta['titles'][$lang] as $meta)
                                <li class="li">{{$meta}} </li>
                            @endforeach
                        @endif

                    </ul>
                </div>
            </div>
            <div class="delivery_data mt-5 pt-5">
                <h1 class="deliever_logos_title text-center pb-5">{{__('photoCategories.we_deliver_through')}}</h1>
                <div class="logos position-relative d-flex justify-content-center mt-5">
                    @if(count($deliveryCompanies))
                        @foreach($deliveryCompanies as $deliveryCompany)
                            <div class="img">
                                <img src="{{asset($deliveryCompany)}}" alt="" class="delivery_logo"/>
                                <span class="line"></span>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
        <img src="{{asset($whyUsPage->image)}}" alt="" class="img_l"/>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.navbar').addClass('navbar-light home-nav')
    </script>
@endsection