@extends('layout.app')

@section('content')
    <header class="header position-relative">
        <div class="container ">
            <div class="row pt-lg-4 justify-content-between">
                <div class="m-auto col-lg-3 col-md-4 col-6">
                    <a href="{{ route('home') }}">
                        <img src="{{ asset('img/logo.png') }}" class="img-fluid" alt="">
                    </a>

                </div>
                <div class="col-lg-8 pb-lg-0 pb-4 float-right col-md-8  mt-xl-4 mt-md-3">
                    <div class="md-form position-relative">
                        <input class="form-control searchbar" type="text" placeholder="Search" aria-label="Search">
                        <a href="#" class="searchbar-icon text-light">
                            <i class="fas fa-search"></i>
                        </a>
                        <div class="search-results">
                            <ul id="searchList">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row pt-lg-5 pb-lg-4  d-none d-lg-flex ">
                <div class="col-lg-4"></div>
                <div class="col-lg-8 dark">
                    <div class="col-12">
                        <h4>{{ $store->name }} promo codes and coupons {{ date('Y') }}</h4>
                        <small class="pr-5">{{ date('F') }}</small>
                        <small><strong>{{ $store->offers->count() }}</strong> offers validated</small>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 sidebar-merchant">
                <div class="card d-block text-center">
                    <div class="c-img" style="background-image:url({{ asset('storage/' . $store->logo) }});">

                    </div>
                    <!-- <img src="{{ asset('storage/' . $store->logo) }}" class="card-img-top col-md-12 col-12 pr-4 pl-4" alt="..."> -->
                    <div class="card-footer d-none d-lg-block text-center">
                        <h5 class="card-title m-0 ">Do you recommend</h5>
                        <h4 class="card-title m-0" style="font-weight: 700;">{{ $store->name }}?</h4>
                        <div id="rater" class="mt-2 mb-3"></div>
                        <br>
                        <small class="card-text"> <span class="rate-count"> {{$store->total_rate() }} </span> shoppers voted</small>
                    </div>
                </div>
                @if ($store->about_us != null)
                    <div class="card mt-5 d-none d-lg-block">
                        <div class="card-header text-center">
                            <strong>About {{ $store->name }}</strong>
                        </div>
                        <div class="card-body">
                            <p class="card-text">{{ $store->about_us }}</p>

                            <div class="mt-2 text-center">
                                <hr>

                                <a href="{{ $store->direct_url }}" target="_blank"> <strong class="text-primary">Shop at
                                        {{ $store->name }}</strong></a>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
            <div class="col-lg-8">
                <div class="col-12 text-center p-4">
                    <h5> <strong> Top {{ $store->name }} Coupons</strong></h5>
                </div>

                @foreach ($store
            ->offers()
            ->orderBy('order', 'ASC')
            ->limit(2)
            ->get()
        as $offer)
                    <div class="card coupon-merchant">
                        <div class="card-body">
                            <div class="row m-0">
                                <div class="col-md-10 pt-2">
                                    @if ($offer->sub_title != 0)
                                        <div class="label">
                                            <strong>{{ $offer->sub_title }}</strong>
                                            <span>OFF</span>
                                        </div>
                                    @endif

                                    <strong class="card-title">{{ $offer->headline }}</strong>
                                    <p class="card-text">{{ $offer->desc }}</p>
                                    <div class="float-right">
                                        <small class="card-icons"><img src="{{ asset('img/valid-icon.png') }}" width="18"
                                                alt=""> Verifed</small>
                                        <small class="card-icons"><img src="{{ asset('img/ex-icon.png') }}" width="15"
                                                alt=""> Exclusive</small>
                                    </div>
                                </div>
                                @if ($offer->type == 'deal')
                                    <div class="col-2 custom-btn d-none d-md-block">
                                        <a data-href="{{ route('deal', $offer->id) }}" data-id=""
                                            class="btn h-100 btn-block btn-dark coupon-show  "> GET DEAL</a>
                                    </div>
                                    <div class="col-12 p-0 d-table d-md-none">
                                        <a data-href="{{ route('deal', $offer->id) }}" data-id=""
                                            class="btn h-100 btn-block btn-dark coupon-show  "> GET DEAL</a>
                                    </div>
                                @else
                                    @if (Request::has('utm'))
                                        <div class="col-2 custom-btn d-none d-md-block">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ str_replace($offer->store->network->url_parameter . '=', $offer->store->network->url_parameter . '=' . Request::get('utm'), $offer->store->affilate_url) }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                        <div class="col-12 p-0 d-table d-md-none">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ str_replace($offer->store->network->url_parameter . '=', $offer->store->network->url_parameter . '=' . Request::get('utm'), $offer->store->affilate_url) }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                    @else
                                        <div class="col-2 custom-btn d-none d-md-block">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ $offer->store->affilate_url }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                        <div class="col-12 p-0 d-table d-md-none">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ $offer->store->affilate_url }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                    @endif
                                @endif

                            </div>

                        </div>

                    </div>
                @endforeach


                @foreach ($store
            ->offers()
            ->offset(2)
            ->limit(PHP_INT_MAX)
            ->orderBy('order', 'ASC')
            ->get()
        as $offer)
                    @if ($loop->first)
                        <div class="col-12 text-center p-4">
                            <h5> <strong> Other Coupons</strong></h5>
                        </div>
                    @endif
                    <div class="card coupon-merchant">
                        <div class="card-body">
                            <div class="row m-0">
                                <div class="col-md-10 pt-2">
                                    @if ($offer->sub_title != 0)
                                        <div class="label">
                                            <strong>{{ $offer->sub_title }}</strong>
                                            <span>OFF</span>
                                        </div>
                                    @endif

                                    <strong class="card-title">{{ $offer->headline }}</strong>
                                    <p class="card-text">{{ $offer->desc }}</p>
                                    <div class="float-right">
                                        <small class="card-icons"><img src="{{ asset('img/valid-icon.png') }}" width="18"
                                                alt=""> Verifed</small>
                                        <small class="card-icons"><img src="{{ asset('img/ex-icon.png') }}" width="15"
                                                alt=""> Exclusive</small>
                                    </div>
                                </div>
                                @if ($offer->type == 'deal')
                                    <div class="col-2 custom-btn d-none d-md-block">
                                        <a href="{{ route('deal', $offer->id) }}" target="_blank"
                                            class="btn h-100 btn-block btn-dark "> GET DEAL</a>
                                    </div>
                                    <div class="col-12 p-0 d-table d-md-none">
                                        <a href="{{ route('deal', $offer->id) }}" target="_blank"
                                            class="btn h-100 btn-block btn-dark "> GET DEAL</a>
                                    </div>
                                @else
                                    @if (Request::has('utm'))
                                        <div class="col-2 custom-btn d-none d-md-block">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ str_replace($offer->store->network->url_parameter . '=', $offer->store->network->url_parameter . '=' . Request::get('utm'), $offer->store->affilate_url) }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                        <div class="col-12 p-0 d-table d-md-none">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ str_replace($offer->store->network->url_parameter . '=', $offer->store->network->url_parameter . '=' . Request::get('utm'), $offer->store->affilate_url) }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                    @else
                                        <div class="col-2 custom-btn d-none d-md-block">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ $offer->store->affilate_url }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                        <div class="col-12 p-0 d-table d-md-none">
                                            <a href="javascript:void(0)"
                                                data-href="{{ route('store', ['slug' => $offer->store->slug]) }}"
                                                data-id="{{ $offer->id }}"
                                                data-affilate="{{ $offer->store->affilate_url }}"
                                                class="btn coupon-show h-100 btn-block btn-dark "> REVEAL CODE</a>
                                        </div>
                                    @endif

                                @endif

                            </div>

                        </div>

                    </div>
                @endforeach

                <div class="card mt-5 d-none">
                    <div class="card-header">
                        <strong>ForChics Promo Codes FAQ</strong>
                    </div>
                    <div class="card-body">
                        <div class="col-12 text-center">
                            <img src="{{ asset('img/faq.png') }}" class="img-fluid" alt="">
                            <hr>
                        </div>
                        <strong class="card-text"><img class="mr-2" src="{{ asset('img/q.png') }}" alt=""> Where to Get
                            Coupons for ForChics?</strong>
                        <p class="card-text mt-2"><img class="mr-2" src="{{ asset('img/a.png') }}" alt="">Well, you are at
                            the right place. You can find ForChics coupons at Refermate.com. Make sure to check ForChics’s
                            social media accounts as sometimes they offer exclusive coupons from these channels. However,
                            you’ll most likely find the same coupons across the web. Luckily, you are at refermate so on top
                            of saving with ForChics promo codes, you can also earn extra with ForChics cash back.</p>

                        <strong class="card-text"><img class="mr-2" src="{{ asset('img/q.png') }}" alt="">What is the best
                            Promo Code ForChics has ever published?</strong>
                        <p class="card-text mt-2"><img class="mr-2" src="{{ asset('img/a.png') }}" alt="">The highest
                            discounted promo code for ForChics is 20% off. It was published in November, 2020.</p>

                        <strong class="card-text"><img class="mr-2" src="{{ asset('img/q.png') }}" alt="">What is the best
                            way to refer ForChics to my friends?</strong>
                        <p class="card-text mt-2"><img class="mr-2" src="{{ asset('img/a.png') }}" alt="">Simply grab your
                            referral URL from our ForChics promo code page and share it with your friends. You can also
                            paste your link on forums and social media. Make sure to combine your link along with November,
                            2020 ForChics coupons.</p>
                    </div>
                </div>

                <div class="card d-block text-center">
                    <div class="card-footer d-block d-lg-none text-center">
                        <h5 class="card-title m-0 ">Do you recommend</h5>
                        <h4 class="card-title m-0" style="font-weight: 700;">{{ $store->name }}?</h4>
                        <div id="rater-mobile" class="mt-2 mb-3"></div>
                        <br>
                        <small class="card-text"> <span class="rate-count"> {{$store->total_rate() }} </span> shoppers voted</small>
                    </div>

                    @if ($store->about_us != null)
                        <div class="card mt-5 d-block d-lg-none">
                            <div class="card-header text-center">
                                <strong>About {{ $store->name }}</strong>
                            </div>
                            <div class="card-body">
                                <p class="card-text">{{ $store->about_us }}</p>

                                <div class="mt-2 text-center">
                                    <hr>

                                    <a href="{{ $store->direct_url }}" target="_blank"> <strong class="text-primary">Shop
                                            at {{ $store->name }}</strong></a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
    <div class="container mt-5 d-none">
        <div class="row">
            <div class="col-12">
                <h5>Latest articles</h5>
            </div>
            <div class="owl-carousel">
                @for ($i = 0; $i < 4; $i++)
                    <div class="col bg-white">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <img src="{{ asset('/img/blog_' . $i . '.png') }}" class="img-fluid" alt="">
                            </div>
                        </div>
                        <div class="row  mt-3">
                            <div class="col-12 text-center">
                                <strong> Promocodes Hero: Saving Your Money One Cart At A Time!</strong>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-right">
                                <small> AUG 17, 2020 </small>
                            </div>
                        </div>

                        <div class="row  mt-3">
                            <div class="col-12">
                                <span class="light-text">
                                    Now that almost everyone is shopping online, there’s an urgent need to know the best
                                    ways to save online (and less judgment for spending hours on your computer). Making the
                                    most of your online shopping experience...
                                </span>
                            </div>
                        </div>
                    </div>
                @endfor

            </div>
        </div>
    </div>
    <section class="subscribe mt-5" data-aos="fade-right" data-aos-duration="500" data-aos-easing="ease-in-out"
        data-aos-delay="50">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <hr>
                </div>
                <div class="col-12 col-md-4 col-lg-3 text-center text-md-left">
                    <img src="{{ asset('img/subs.png') }}" class="img-fluid" alt="">
                </div>
                <div class="col-12 col-md-8 col-lg-9 mt-md-5 sub-content p-2 text-center text-md-left">
                    <div class="col-12">
                        <span class="sub-title"><strong> Subscribe</strong> to our weekly newsletter!</span>
                    </div>
                    <div class="col-12  mb-md-3">
                        <span class="sub-desc">
                            Get coupons from your favorite retailers sent to your inbox at the beginning of every week. You
                            can cancel
                            anytime.
                        </span>
                    </div>
                    <div class="col-12 col-md-8 float-left p-2">
                        <input type="text" placeholder="example@mail.com" class="form-control">
                    </div>
                    <div class="col-12 float-left p-2 col-md-4">
                        <a href="#" class="btn btn-block btn-dark">SUBSCRIBE</a>
                    </div>
                </div>
            </div>


        </div>

    </section>

@endsection

@section('custom-script')

    <script>
        var rateCallback = function(rating, done) {

            var data = {
                '_token': '{{ csrf_token() }}',
                'store_id': '{{ $store->id }}',
                'rate': rating
            };

            $.ajax({
                'url': '/stores/rate',
                'type': 'POST',
                'data': data,
                success: function(result) {
                    merchantRate.setRating(parseFloat(result));
                    merchantRateMobile.setRating(parseFloat(result));

                    var total = parseInt($('.rate-count').html());

                    merchantRate.disable();
                    merchantRateMobile.disable();

                    $('.rate-count').html(total + 1);
                }
            });

            done();
        }

        var rate = "{{ $store->rating() }}";
        var read = parseInt("{{$store->hasRate(Request::ip())}}");
        

        
        var merchantRate = rater({
            element: document.querySelector("#rater"),
            starSize: 30,
            rateCallback: rateCallback,
            readOnly:read,
        });
        var merchantRateMobile = rater({
            element: document.querySelector("#rater-mobile"),
            starSize: 30,
            rateCallback: rateCallback,
            readOnly:read,
        });

        merchantRate.setRating(parseFloat(rate));
        merchantRateMobile.setRating(parseFloat(rate));

    </script>
@endsection