@extends('front.layouts.app', ['title' => 'Home'])

@section('content')
@include('front.layouts.app-header')

<section class="banner_section">
    <div class="banner_wrap">
        <div class="banner_social_icons">
            <ul>
                <li><a target="_blank" href="https://www.instagram.com/graileysfinewines/"><i
                            class="fab fa-instagram"></i></a></li>
                <li><a target="_blank" href="https://www.instagram.com/graileysfinewines/"><i
                            class="fab fa-linkedin-in"></i></a></li>
                <li><a href="#!"><i class="fab fa-twitter"></i></a></li>
                <li><a target="_blank" href="https://www.facebook.com/Graileys/"><i class="fab fa-facebook-f"></i></a>
                </li>
            </ul>
            <label for="">SPECIAL EDITION</label>
        </div>
        <div class="homeSlider">
            @if (count($banners) > 0 )
            @foreach ($banners as $banner)
            <div class="home_slider_item"
                style="background:url({{ url('storage') . '/' . $banner->image}}) center / cover no-repeat; ">
                <div class="container">
                    <div class="home_slider_content">
                        <div class="home_slider_icon">
                            <img src="{{asset('images/glass.png')}}">
                        </div>
                        <div class="home_slider_inner_content">
                            <label>GRAILEYS FINE WINES</label>
                            <h2>{{$banner->caption? $banner->caption: ''}}</h2>
                            {{-- @if ($ecomm_enabled == 1)--}}
                            <div class="c_btn c_btn_red">
                                <a href="{{route('shop')}}">Shop Now <i class="fas fa-long-arrow-alt-right"></i>
                                    <!--<img src="images/right-arrow.png">-->
                                </a>
                                <a data-toggle="modal" data-target="#exampleModal" style="background: #d79d47f2;">Sign
                                    up for Graileys Exclusive Wine Offers.</a>
                            </div>
                            {{-- @endif--}}
                        </div>
                    </div>
                </div>
                <div class="qr-container">
                    <div class="qr-code-container">
                    
                        <div class="qr-code-desktop">
                            <img src="{{ url('QRcode/Graileys-qr-code.png') }}" alt="QR Code" />
                            <p class="qr-code-text">Scan to Download the Graileys app. Be the first to see our Exclusive Wine Offers.</p>
                        </div>

                        <a href="https://apps.apple.com/in/app/graileysfinewines/id6477690300" target="_blank" class="qr-code-mobile">
                            <img src="{{ url('QRcode/app-store.svg') }}" alt="App Store">
                        </a>
                    </div>
                    <a href="{{route('daily-offer')}}" class="slider-daily-deal">
                        <span>Daily Deal</span>
                    </a>
                </div>
            </div>
            @endforeach
            @else
            <div class="home_slider_item" style="background:url(images/banner-bg_1.png) center / cover no-repeat; ">
                <div class="container">
                    <div class="home_slider_content">
                        <div class="home_slider_icon">
                            <img src="images/glass.png">
                        </div>
                        <div class="home_slider_inner_content">
                            <label>GRAILEYS FINE WINES</label>
                            <h2>Exceptional selections <br>from all over the world</h2>
                            <div class="c_btn c_btn_red">
                                <a href="#">Shop Now <i class="fas fa-long-arrow-alt-right"></i>
                                    <!--<img src="images/right-arrow.png">-->
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</section>
@if ($ecomm_enabled == 1)
<section class="category_card_sec">
    <div class="container">
        <div class="section_title_1">
            <h2>Shop Now Open!</h2>
        </div>
        <div class="row">
            @if (count($home_categories) > 0)
            @foreach ($home_categories as $category)
            <div class="col col-4">
                <div class="product_card">
                    <div class="product_card_inner">
                        <div class="product_content">
                            <label class="product_category"></label>
                            <h3 class="product_name">{{$category->name}}</h3>
                            <a href="{{route('shop', ['slug1' => $category->slug])}}">Shop now</a>
                        </div>
                        <div class="product_img">
                            @if(!empty($category->image) &&
                            \Illuminate\Support\Facades\Storage::exists($category->image))
                            <img src="{{ url('storage') . '/' .  $category->image}}" alt="">
                            @else
                            <img src="{{ asset('images/empty.png')}}">
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>
@endif
<section class="our_story_sec" style="background:url(images/our_story_bg.jpg) center / cover no-repeat fixed; ">
    <div class="container">
        <div class="row">
            <div class="col col-7">
                <div class="our_story_card">
                    <div class="story_card_inner c_scroll_bar">
                        {{-- <label for="" class="story_card_label">How we Started</label> --}}
                        <h2 class="story_card_title">{{isset($our_story) && isset($our_story->title) ?
                            $our_story->title: ''}}</h2>
                        <p>{{isset($our_story) && isset($our_story->content) ?$our_story->content: ''}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@if ($ecomm_enabled == 1)
<section class="featured_sec">
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <div class="section_title">
                    <h2>Featured Wines</h2>
                </div>
            </div>
            <div class="col col-12">
                <div class="featured_filter_wrap">
                    <ul class="featured_filter_lists">
                        <li class="featured_filter_item active" data-productFeatureType="all">All</li>
                        <li class="featured_filter_item" data-productFeatureType="featureProducts">Feature
                            Products
                        </li>
                        <li class="featured_filter_item" data-productFeatureType="popularProducts">Popular
                            Products
                        </li>
                    </ul>
                </div>
                <div class="filter_card_wrapper">
                    <div class="filter_card_lists row" id="feature_card_lists">
                        @include('front.product.product-feature-list')
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<section class="news_sec home">
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <div class="section_title">
                    <h2>Featured Blogs</h2>
                </div>
            </div>
        </div>
        <div class="row">
            @if (count($feature_blogs) > 0)
            @foreach ($feature_blogs as $blog)
            <div class="col col-4">
                <div class="news_card_wrap">
                    <div class="news_card_inner">
                        <div class="news_card_img">
                            @if(!empty($blog->image) && \Illuminate\Support\Facades\Storage::exists($blog->image))
                            <a href="{{ url('storage') . '/' . $blog->image}}" data-fancybox="blog_img">
                                <img src="{{ url('storage') . '/' . $blog->image}}" alt="">
                            </a>
                            @else
                            <a href="{{ url('storage') . '/no_image.png'}}" data-fancybox="blog_img">
                                <img src="{{ url('storage') . '/no_image.png'}}">
                            </a>
                            @endif
                            {{-- <span>WineShop</span> --}}
                        </div>
                        <div class="news_card_content">
                            <a href="{{route('blog-detail', ['slug' => $blog->slug])}}">
                                <ul>

                                    <li>{{ $blog->date ? date('F j Y', strtotime($blog->date)) : date('F j Y',
                                        strtotime($blog->created_at)) }}</li>
                                </ul>
                                <h3>{{$blog->name}} </h3>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"
    integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="contact_information_form" name="contact_information_form" data-parsley-validate="">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Contact Information</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <label>First Name</label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="col-md-12">
                            <label>Last Name</label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                        <div class="col-md-12">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="col-md-12">
                            <label>Phone Number</label>
                            <input type="text" name="phone" class="form-control" required>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <div class="c_btn">
                        <a type="button" data-dismiss="modal">Close</a>

                    </div>
                    <div class="c_btn c_btn_red">
                        <input type="submit" name="Submit" value="Subscribe">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


@include('front.layouts.app-footer')
@endsection
@section('custom-js')
<script>
    let featureProductUrl = "{{route('feature-products')}}";
        let contactInformationUrl = "{{route('contact.information')}}";

</script>
@endsection