@extends('layouts.frontend')

@section('ogp')
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ route('store', $store->post->slug) }}">
    <meta property="og:image" content="{{ asset($store->image ?? $options->image ?? 'images/image.jpg') }}">
    <meta property="og:title" content="{{ $store->post->title }}">
    <meta property="og:description" content="{{ $store->post->excerpt }}">
@endsection

@section('title', $store->post->title)

@section('content')
    <article id="store">
        @if($store->post->media()->notFeatured()->count())
        <div class="slider">
            <div class="owl-carousel">
                @foreach($store->post->media()->notFeatured()->get()->sortBy('post.order') as $medium)
                    <div class="item">
                        <img src="{{ asset($medium->post->image) }}" alt="" class="cover">
                    </div>
                @endforeach
            </div>
            <img src="{{ asset('images/ribbon.png') }}" alt="" class="ribbon">
        </div>
        @endif
        <section class="content products">
            <div class="container">
                <div class="store-info">
                    <img src="{{ asset($store->image) }}" alt="" class="store-image">
                    <div class="row row-grid justify-content-around">
                        <div class="col-md-5">
                            <div class="content-html">
                                <p>{!! nl2br($store->post->excerpt) !!}</p>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="info">
                                @if($store->phone)
                                <p>
                                    <i class="fa fa-phone"></i>
                                    <span>{!! $store->phone !!}</span>
                                </p>
                                @endif
                                @if($store->whatsapp)
                                <p>
                                    <i class="fab fa-whatsapp"></i>
                                    <span>{!! $store->whatsapp !!}</span>
                                </p>
                                @endif
                                @if($store->email)
                                <p>
                                    <i class="far fa-envelope"></i>
                                    <span><a href="mailto:{!! $store->email !!}">{!! $store->email !!}</a></span>
                                </p>
                                @endif
                                @if($store->website)
                                <p>
                                    <i class="far fa-globe"></i>
                                    <span><a href="{{ $store->website }}" target="_blank">{!! domain_url($store->website) !!}</a></span>
                                </p>
                                @endif
                                @if($store->address)
                                <p>
                                    <i class="fa fa-map-marker-alt"></i>
                                    <span>{!! $store->address !!}</span>
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @if($store->products->count())
                    <div class="row row-grid">
                        @foreach($store->products as $product)
                            <div class="col-md-3 col-sm-6">
                                @include('partials.card')
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>
    </article>
@endsection

@section('scripts')
    <div class="cart-menu">
        @include('partials.cart', [
            'cart' => Cart::instance($store->post->slug)
        ])
    </div>
    <div class="modal">
        <div class="modal-content">
        </div>
    </div>
    <script>
        $(function() {
          $('.slider .owl-carousel').owlCarousel({
            items: 1,
            dots: true,
            nav: false,
            mouseDrag: true,
            touchDrag: true,
            loop: true,
            autoplay: true,
            autoHeight: true,
            animateOut: 'fadeOut',
            thumbs: false,
            autoplayHoverPause: true,
          });

          $('body').on('click', '.modal-close', function() {
            $('.modal, .modal-content').removeClass('modal-active');
            return false;
          });

          $('body').on('click', '.cart-close', function() {
            $('body, .cart-menu').removeClass('cart-active');
            return false;
          });

          $('body').on('click', '.btn-cart', function() {
            $('body, .cart-menu').toggleClass('cart-active');
            return false;
          });

          $('body').on('click', '.btn-add', function() {
            var id = $(this).attr('data-id');
            $.post('{{ route('cart.add') }}', { id: id }).done(function(response) {
              $('.cart-menu').html(response.html);
              $('body, .cart-menu').addClass('cart-active');
              $('.modal, .modal-content').removeClass('modal-active');
            }).fail(function(response) {
              alert(response.responseJSON.message);
            });
            return false;
          });

          $('body').on('click', '.btn-remove', function() {
            var rowId = $(this).attr('data-id');
            $.post('{{ route('cart.remove') }}', { rowId: rowId, store: '{{ $store->post->slug }}' }).done(function(response) {
              $('.cart-menu').html(response.html);
            }).fail(function(response) {
              alert(response.responseJSON.message);
            });
            return false;
          });

          $('.modal-toggle').on('click', function() {
            $('.modal').addClass('modal-active');
            $.get($(this).attr('href'), function(response) {
              $('.modal-content').html(response.html).addClass('modal-active');
            }).fail(function(response) {
              alert(response.responseJSON.message);
              $('.modal').removeClass('modal-active');
            });
            return false;
          });
        });
    </script>
@endsection