@extends('layout.home')

@section('title', 'Product')

@section('content')

    <!-- Single Product -->
    <section class="section-wrap pb-40 single-product">
        <div class="container-fluid semi-fluid">
            <div class="row">

                <div class="col-md-6 col-xs-12 product-slider mb-60">

                    <div class="flickity flickity-slider-wrap mfp-hover" id="gallery-main">

                        <div class="gallery-cell">
                            <a href="/uploads/{{ $product->gambar }}" class="lightbox-img">
                                <img src="/uploads/{{ $product->gambar }}" alt="" />
                                <i class="ui-zoom zoom-icon"></i>
                            </a>
                        </div>
                        <div class="gallery-cell">
                            <a href="/uploads/{{ $product->gambar }}" class="lightbox-img">
                                <img src="/uploads/{{ $product->gambar }}" alt="" />
                                <i class="ui-zoom zoom-icon"></i>
                            </a>
                        </div>
                        <div class="gallery-cell">
                            <a href="/uploads/{{ $product->gambar }}" class="lightbox-img">
                                <img src="/uploads/{{ $product->gambar }}" alt="" />
                                <i class="ui-zoom zoom-icon"></i>
                            </a>
                        </div>
                        <div class="gallery-cell">
                            <a href="/uploads/{{ $product->gambar }}" class="lightbox-img">
                                <img src="/uploads/{{ $product->gambar }}" alt="" />
                                <i class="ui-zoom zoom-icon"></i>
                            </a>
                        </div>
                        <div class="gallery-cell">
                            <a href="/uploads/{{ $product->gambar }}" class="lightbox-img">
                                <img src="/uploads/{{ $product->gambar }}" alt="" />
                                <i class="ui-zoom zoom-icon"></i>
                            </a>
                        </div>
                    </div> <!-- end gallery main -->

                    <div class="gallery-thumbs">
                        <div class="gallery-cell">
                            <img src="/uploads/{{ $product->gambar }}" alt="" />
                        </div>
                        <div class="gallery-cell">
                            <img src="/uploads/{{ $product->gambar }}" alt="" />
                        </div>
                        <div class="gallery-cell">
                            <img src="/uploads/{{ $product->gambar }}" alt="" />
                        </div>
                        <div class="gallery-cell">
                            <img src="/uploads/{{ $product->gambar }}" alt="" />
                        </div>
                        <div class="gallery-cell">
                            <img src="/uploads/{{ $product->gambar }}" alt="" />
                        </div>
                    </div> <!-- end gallery thumbs -->

                </div> <!-- end col img slider -->

                <div class="col-md-6 col-xs-12 product-description-wrap">
                    <ol class="breadcrumb">
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a
                                href="/products/{{ $product->id_kategori }}">{{ $product->category->nama_kategori }}</a>
                        </li>
                        <li class="active">
                            Catalog
                        </li>
                    </ol>
                    <h1 class="product-title">{{ $product->nama_produk }}</h1>
                    <span class="price">
                        <ins>
                            <span class="amount">Rp . {{ number_format($product->harga) }}</span>
                        </ins>
                    </span>
                    <p class="short-description">{{ $product->deskripsi }}</p>

                    <div class="color-swatches clearfix">
                        <span>Color:</span>
                        @php
                            $colours = explode(',', $product->warna);
                        @endphp

                        @foreach ($colours as $colour)
                            <input type="radio" name="color" id="{{ $colour }}" value="{{ $colour }}"
                                class="color">
                            <label for="{{ $colour }}" style="margin-right: 20px">{{ $colour }}</label>
                        @endforeach
                    </div>

                    {{-- <div class="size-options clearfix">
                        <span>Size:</span>
                        @php
                            $sizes = explode(',', $product->ukuran);
                        @endphp

                        @foreach ($sizes as $size)
                            <input type="radio" name="sizes" id="{{ $size }}" value="{{ $size }}"
                                class="size">
                            <label for="{{ $size }}" style="margin-right: 20px">{{ $size }}</label>
                        @endforeach
                    </div> --}}

                    <div class="product-actions">
                        <span>Qty:</span>

                        <div class="quantity buttons_added">
                            <input type="number" step="1" min="0" value="1" title="Qty"
                                class="input-text jumlah qty text" />
                            <div class="quantity-adjust">
                                <a href="#" class="plus">
                                    <i class="fa fa-angle-up"></i>
                                </a>
                                <a href="#" class="minus">
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
                        </div>

                        <a href="#" class="btn btn-dark btn-lg add-to-cart"><span>Add to Cart</span></a>

                        <a href="#" class="product-add-to-wishlist"><i class="fa fa-heart"></i></a>
                    </div>


                    <div class="product_meta">
                        <span class="sku">SKU: <a href="#">{{ $product->sku }}</a></span>
                        <span class="brand_as">Category: <a
                                href="#">{{ $product->category->nama_kategori }}</a></span>
                        <span class="posted_in">Tags: <a href="#">{{ $product->tags }}</a></span>
                    </div>

                    <!-- Accordion -->
                    <div class="panel-group accordion mb-50" id="accordion">
                        <div class="panel">
                            <div class="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                                    class="minus">Description<span>&nbsp;</span>
                                </a>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    {{ $product->deskripsi }}
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                                        class="plus">Information<span>&nbsp;</span>
                                    </a>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <table class="table shop_attributes">
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="socials-share clearfix">
                            <span>Share:</span>
                            <div class="social-icons nobase">
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-google"></i></a>
                                <a href="#"><i class="fa fa-instagram"></i></a>
                            </div>
                        </div>
                    </div> <!-- end col product description -->
                </div> <!-- end row -->

            </div> <!-- end container -->
    </section> <!-- end single product -->


    <!-- Related Products -->
    <section class="section-wrap pt-0 shop-items-slider">
        <div class="container">
            <div class="row heading-row">
                <div class="col-md-12 text-center">
                    <h2 class="heading bottom-line">
                        Latest Products
                    </h2>
                </div>
            </div>

            <div class="row">

                <div id="owl-related-items" class="owl-carousel owl-theme">
                    @foreach ($latest_products as $produk)
                        <div class="product">
                            <div class="product-item hover-trigger">
                                <div class="product-img">
                                    <a href="/product/{{ $produk->id_produk }}">
                                        <img src="/uploads/{{ $produk->gambar }}" alt="">
                                        <img src="/uploads/{{ $produk->gambar }}" alt="" class="back-img">
                                    </a>
                                    <div class="product-label">
                                        <span class="sale">sale</span>
                                    </div>
                                    <div class="hover-2">
                                        <div class="product-actions">
                                            <a href="#" class="product-add-to-wishlist">
                                                <i class="fa fa-heart"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <a href="/product/{{ $produk->id }}" class="product-quickview">More</a>
                                </div>
                                <div class="product-details">
                                    <h3 class="product-title">
                                        <a href="/product/{{ $produk->id }}">{{ $produk->nama_produk }}</a>
                                    </h3>
                                    <span class="category">
                                        <a
                                            href="/products/{{ $produk->id_kategori }}">{{ $produk->category->nama_kategori }}</a>
                                    </span>
                                </div>
                                <span class="price">
                                    <ins>
                                        <span class="amount">{{ 'Rp' . number_format($produk->harga) }}</span>
                                    </ins>
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div> <!-- end slider -->
            </div>
        </div>
    </section> <!-- end related products -->

@endsection

@push('js')
    <script>
        $(function() {
            $('.add-to-cart').click(function(e) {
              e.preventDefault();
                id_member = {{Auth::guard('webmember')->user()->id}}
                id_produk = {{ $product->id_produk }}
                jumlah = $('.jumlah').val()
                total = {{ $product->harga }} * jumlah
                is_checkout = 0

                $.ajax({
                    url: '/add_to_cart',
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': "{{csrf_token()}}",
                    },
                    data: {
                        id_member,
                        id_produk,
                        jumlah,
                        total,
                        is_checkout,
                    },
                    success: function(data) {
                        window.location.href = '/cart'
                    }
                });
            })
        })
    </script>
@endpush