@extends(get_view('index'))
@section('title')@endsection
@section('menu-active-homepage') active @endsection
@section('header')

@endsection
@section('content')


@include(get_view('components.slider.slider'))


<div class="container">
    <div class="row">
        <div class="col-12 mt-5 mb-5">
            <img src="{{ get_asset('images/homepage/image4.jpg?v='. get_version()) }}" alt="{{ Site::get_site_title() }}" width="100%">
            <p class="fs-md-4 text-center mt-4"><i class="fas fa-quote-left me-1"></i> {{ translate('homepage_text_1') }} <i class="fas fa-quote-right ms-1"></i></p>
        </div>
    </div>

    <!-- === About Us List === -->
    @if ( Site::about_us() != null )
        <div class="row">
            <div class="col-12 mt-5 mb-3">
                <h2 class="page-content-title">{{ translate('who_are_we') }}</h2>
                <p class="text-muted">{{ translate('who_are_we_text') }}</p>
            </div>
        </div><!-- row -->

        <div class="row">
            <div class="col-sm-12 col-12">
                <div class="bg-white  mb-3 p-4">
                    <div class="mobile-height-200px text-muted">
                        {!! strip_tags(Site::about_us()->content) ?? '-' !!}

                        <div class="mobile-height-shadow"></div>
                    </div>
                    <div class="mobile-height-button d-sm-none d-block">
                        <a href="{{ url('about-us') }}">{{ translate('review') }}</a>
                    </div>
                </div>
            </div>
        </div><!-- row -->
    @endif
</div>

<div class="py-lg-5 py-3 d-lg-block d-none section-category-list-1" style="background-color: #C2C3CC">
    <div class="container">
        <!-- === Category List === -->
        @if ( count(Site::categories()) > 0 ) 
            <div class="row py-5">
                @foreach (Site::mainCategories() as $key => $item)
                    @if ( $item->image != null )
                        @if ( $key == 0 )
                        <div class="col-md-6 col-12 d-flex justify-content-center align-items-center">
                            <a href="{{ Common::category_url($item) }}" class="d-block w-100">
                                <div class="bg-dark position-relative c-item" style="min-height: 550px; width: 100%; border: 10px solid #fff;border-radius: 10px 0px 0px 10px; background-position:center;background-image: url({{ Common::get_category_original_image($item->id, $item->image) }}); background-size: cover;">
                                    <div class="position-absolute p-4" style="width: 100%; left: 0px; bottom: 0px;">
                                        <p class="text-white fs-3 fw-bold m-0 mb-3 p-0" style="text-shadow: 1px 1px black;">{{ $item->content->name }}</p>
                                        <p>
                                            <span class="btn btn-light rounded-pill text-dark fw-bold px-4">{{ translate('explore') }} <i class="fa fa-angle-right"></i></span>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @php
                            break;
                        @endphp
                        @endif
                    @endif
                @endforeach
                
                <div class="col-md-6 col-12 g-md-0">
                    <div class="row">
                        @foreach (Site::mainCategories() as $key => $item)
                            @if ( $item->image != null )
                                @if ( $key > 0 && $key < 5 )
                                    <div class="col-sm-6 col-12 g-md-0">
                                        <a href="{{ Common::category_url($item) }}" class="d-block w-100">
                                            <div class="bg-dark position-relative c-item" style="min-height: 275px; width: 100%; border: 10px solid #fff; border-left: 0px;@if($key==1 || $key ==2) border-bottom: 0px; @endif @if($key==2) border-radius: 0px 10px 0px 0px; @endif @if($key==4) border-radius: 0px 0px 10px 0px; @endif background-position:center;background-image: url({{ Common::get_category_original_image($item->id, $item->image) }}); background-size: cover;">
                                                <div class="position-absolute p-3" style="width: 100%; text-align: right;">
                                                    <span class="btn btn-light rounded-circle text-dark fw-bold fs-4" style="width: 50px; height: 50px;"><i class="fa fa-angle-right"></i></span>
                                                </div>
                                                <div class="position-absolute p-4" style="width: 100%; left: 0px; bottom: 0px;">
                                                    <p class="text-white fs-5 fw-bold m-0 p-0" style="text-shadow: 1px 1px black;">{{ $item->content->name }}</p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<div class="container">
    <!-- === Category List === -->
    @if ( count(Site::categories()) > 0 )
        <div class="row">
            <div class="col-12 mt-5 mb-3">
                <h2 class="page-content-title">{{ translate('what_we_do') }}</h2>
                <p class="text-muted">{{ translate('what_we_do_text') }}.</p>
            </div>
        </div><!-- row -->
        
        @include(get_view('components.category.home-list'))
    @endif
</div>


<!-- === Showroom List === -->
@if ( count(Site::showroom()) > 0 )
    <div class="bg-light pt-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-3">
                    <h2>{{ translate('our_picks_for_you') }}</h2>
                    <p class="text-muted">{{ translate('our_picks_for_you_text') }}</p>
                </div>
            </div><!-- row -->

            <div class="row">
                @foreach (Site::showroom() as $product)
                <div class="col-md-4 col-sm-6 col-12">
                    @include(get_view('components.product.single-product'))
                </div>
                @endforeach
            </div><!-- row -->
        </div>
    </div>
@endif


<div class="container-fluid">
    @if( get_language_code() == "tr" )
    <div class="row">
        <div class="col-12 mt-5 mb-5">
            <a href="/e-katalog">
                <img src="{{ get_asset('images/homepage/image2.png?v='. get_version()) }}" alt="{{ Site::get_site_title() }}" width="100%">
            </a>
        </div>
    </div>
    @elseif( get_language_code() == "en" )
    <div class="row">
        <div class="col-12 mt-5 mb-5">
            <a href="/e-katalog">
                <img src="{{ get_asset('images/homepage/image2.png?v='. get_version()) }}" alt="{{ Site::get_site_title() }}" width="100%">
            </a>
        </div>
    </div>
    @endif
</div>

<div class="container">
    <div class="row mt-3">
        <div class="col-12">
            <div class="bg-light p-5 rounded-3 shadow-lg">
                <div class="row">
                    <div class="col-md-4 col-sm-12 col-12">
                        <div class="bg-white p-3 pt-4 pb-4">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('images/icons/special/secure-payment.png?v='. get_version()) }}" alt="{{ translate('secure_shopping') }}" width="80">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="m-0 p-0"><strong>{{ translate('secure_shopping') }}</strong></p>
                                    <p class="m-0 p-0 fs-14 text-muted">{{ translate('secure_shopping_text') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-12">
                        <div class="bg-white p-3 pt-4 pb-4 ">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('images/icons/special/truck.png') }}" alt="{{ translate('free_shipping') }}" width="80">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="m-0 p-0"><strong>{{ translate('free_shipping') }}</strong></p>
                                    <p class="m-0 p-0 fs-14 text-muted">{{ translate('free_shipping_text') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-12">
                        <div class="bg-white p-3 pt-4 pb-4 ">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('images/icons/special/return.png?v='. get_version()) }}" alt="{{ translate('return_exchange_guarantee') }}" width="80">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="m-0 p-0"><strong>{{ translate('return_exchange_guarantee') }}</strong></p>
                                    <p class="m-0 p-0 fs-14 text-muted">{{ translate('return_exchange_guarantee_text') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- row -->
</div><!-- container -->

@endsection
@section('footer')

@endsection