@extends('frontend.layouts.frontend_app')
@section('content')
    <section class="p-0" id="banner">
        <div class="container p_sm_0">
            <div class="row m-0">
                <div class="col-lg-9 pr_lg_0 pb_sm_15">
                    <div class="slider">
                        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($sliders as $key => $slider)}}
                                <div class="carousel-item {{ $key === 0 ? 'active' : '' }}">
                                    <img src="{{ asset('storage/images/ecommerce/slider/'.$slider->image) }}" class="d-block w-100" alt="...">
                                </div>
                                @endforeach
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">{{ __('pages.Previous') }}</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">{{ __('pages.Next') }}</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 pr_lg_0">
                    <div class="banner_left">
                        @if(!empty(setting('offer_banner_first')))
                            <div class="banner_left_item pb-lg-3  pb-0">
                                <a href="{{ route('front.discounted_products', ['discount'=> setting('offer_disc_amount_first')]) }}">
                                    <img src="{{asset('storage/images/ecommerce/'.setting('offer_banner_first'))}}"
                                         alt="" class="img-fluid h-100 w-100">
                                </a>
                            </div>
                        @endif
                        @if(!empty(setting('offer_banner_second')))
                            <div class="banner_left_item pt_lg_3">
                                <a href="{{ route('front.discounted_products',['discount'=> setting('offer_disc_amount_second')]) }}">
                                    <img src="{{asset('storage/images/ecommerce/'.setting('offer_banner_second'))}}"
                                         alt="" class="img-fluid h-100  w-100">
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="banner mt-3">
        <div class="container">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between align-items-center pb-4">
                    <h2 class="title text-dark  text-center">{{ __('pages.Categories') }}</h2>
                    <a href="{{ route('front.categories') }}" class="btn btn-default">{{ __('pages.All Categories') }}</a>
                </div>
            </div>
            <div class="col-lg-12 categories">
                <div class="row">
                    @foreach ($categories as $category)
                        <div class="col-lg-2 col-6 px-2 mb-3">
                            <a href="{{ route('front.products',$category->slug) }}">
                                <div class="category_item card border-0 shadow-sm">
                                    <div class="card-body">
                                        @if ($category->image)
                                            <img class="img-fluid"
                                                 src="{{ asset('storage/images/ecommerce/product_type/'.$category->image) }}"
                                                 alt="">
                                        @else
                                            <img class="img-fluid"
                                                 src="{{ asset('storage/images/ecommerce/'.setting('favicon')) }}"
                                                 alt="">
                                        @endif
                                    </div>
                                    <div class="card-footer border-0 bg-transparent p-0">
                                        <h5 class="product-title">{{ $category->title }}</h5>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    <section id="values" class="values features pt-50">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center pb-4">
                <h2 class="title text-dark  text-center">{{ __('pages.Latest Product') }}</h2>
                <a href="{{ route('front.latest_products') }}" class="btn btn-default">{{ __('pages.View More') }}</a>
            </div>
            <div class="row">
                @foreach ($latest_products as $lproduct)
                    @include('frontend.components.product',['medicine' => $lproduct,'class' => ''])
                @endforeach
            </div>
        </div>
    </section>
    @foreach ($categoy_products as $category)
        <section id="values" class="values features mb-3">
            <div class="container aos-init aos-animate" data-aos="fade-up">
                <div class="text-center my-5">
                    <h2 class="title text-dark">{{ $category->title }}</h2>
                </div>
                <div class="row">
                    @foreach (\App\Models\Ecommerce\ProductType::product($category->id,6) as $medicine)
                        @include('frontend.components.product',['medicine' => $medicine,'class' => ''])
                    @endforeach
                </div>
                <div class="text-right">
                    <a href="{{ route('front.products',$category->slug) }}" class="btn btn-default">
                        Show More {{ $category->title }} <i class="fa fa-arrow-right"></i>
                    </a>
                </div>
                @if($category->banner)
                    <div class="row py-2 mt-3">
                        <div class="col-lg-12 px-1">
                            <img height="250" class="img-fluid"
                                 src="{{ asset('storage/images/ecommerce/product_type/'.$category->banner) }}" alt="">
                        </div>
                    </div>
                @endif
            </div>
        </section>
    @endforeach
@endsection