@extends('frontend.layouts.main')

@section('main-container')
    @if (!empty($homecontent) && $homecontent->count() > 0)
        <section class="main">
            <div class="container">
                <div class="hero-block">
                    <div class="hero-block-content">
                        <h1 class="hero-block-title">{{ $homecontent->title }}</h1>
                        <h5 class="hero-block-subtitle">{{ $homecontent->short_description }}</h5>
                        <div class="hero-block-action">
                            <a href="{{ route('frontend.products-list.index') }}" class="d-none d-sm-inline-block btn btn-default btn-lg">
                                Explore Products
                            </a>
                            <a href="{{ route('frontend.products-list.index') }}" class="btn btn-default btn-sm d-inline-block d-md-none">
                                Explore Products
                            </a>
                        </div>
                    </div>
                    <div class="hero-block-img">
                        <img src="{{ asset($homecontent->banner) }}" alt="hero">
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if ($about->count() > 0)
        <section class="section">
            <div class="container">
                <div class="row mb-5 align-items-center justify-content-center">
                    <div class="col-md-4">
                        <img src="{{ asset($about->image) }}" alt="about" class="img-fluid">
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-5">
                        <h2 class="pt-3">{{ $about->title }}</h2>
                        <div class="mt-4">
                            <p class="line-height">
                                {{ $about->short_description }}
                            </p>
                        </div>
                        <div class="mt-5">
                            <a href="{{ route('frontend.aboutus.index') }}" class="btn btn-primary">Know More</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if ($products->count() > 0)
        <section class="section bg-gray-dark">
            <div class="container">
                <div class="row mb-5 align-items-center">
                    <div class="col-md-8">
                        <span class="d-none d-md-block">
                        <h2>Explore our products</h2>
                        </span>
                        <div class="row align-items-center">
                             <span class="col-8 d-sm-block d-md-none">
                        <h2>Products</h2>
                        </span>
                         <a href="{{ route('frontend.products-list.index') }}" class="col-4 text-end text-primary btn-link d-sm-block d-md-none">View All
                    </a>
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('frontend.products-list.index') }}" class="text-primary btn-link d-none d-md-block">View All
                            Products</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="owl-carousel owl-theme product-owl">
                            @foreach ($products as $product)
                                <div class="item">
                                    <div class="card-product">
                                        <div class="card-product-img">
                                            @foreach ($product->ProductImagesByID as $image)
                                                <img src="{{ asset($image->thumnail) }}"
                                                    alt="{{ $product->product_name }}">
                                            @break
                                        @endforeach
                                    </div>
                                    <div class="card-product-body">
                                        <h3 class="card-product-title">{{ $product->product_name }}</h3>
                                    </div>
                                    <div class="card-product-footer">
                                        <a href="{{ route('frontend.product-detail.index', $product->slug) }}"
                                            class="btn btn-primary w-100 btn-sm">View Details</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </section>
@endif
@if ($brand->count() > 0)
    <section class="section bg-primary">
        <div class="container">
            <div class="row mb-5 align-items-center">
                <div class="col-md-12">
                    <h2 class="text-white">Brands we associate with</h2>
                </div>
            </div>
            <div class="row mb-5 align-items-center">
                <div class="col-md-12">
                    <div class="owl-carousel owl-theme brand-owl">

                        @foreach ($brand as $item)
                            <div class="item">
                                <div class="card-brand">
                                    <img src="{{ asset($item->logo) }}" alt="{{ $item->brand_name }}">
                                </div>
                            </div>
                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </section>
@endif
<section class="section">
    <div class="container">
        <div class="row mb-5 align-items-center justify-content-center">
            <div class="col-md-5">
                <h2 class="mb-3">Enquiry Now</h2>
                <p>Feel free to connect with us.</p>
                <div class="mt-5">
                    @include('frontend.create')
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-4 mt-3">
                <img src="{{ asset('frontend/assets/images/quotation.jpg') }}" alt="query" class="img-fluid">
            </div>
        </div>
    </div>
</section>
@endsection