@extends('layouts.app')

@section('content')
    <section class="section bg-gray">
        <!-- Container Start -->
        <div class="container">
            <div class="row">
                <!-- Left sidebar -->
                <div class="col-md-8">
                    <div class="product-details">
                        <h1 class="product-title">{{ $product->first()->name }}</h1>
                        <div class="product-meta">
                            <ul class="list-inline">
                                <li class="list-inline-item"><i class="fa fa-folder-open-o"></i> Kategori<a
                                        href="/shop/{{ $product->first()->Category->name }}">{{ $product->first()->Category->name }}</a>
                                </li>
                            </ul>
                        </div>

                        <!-- product slider -->
                        <div class="product-slider mt-2">
                            <div class="product-slider-item my-4" data-image="{{ url($product->first()->image) }}">
                                <!-- <img class="img-fluid w-100" src="{{-- url($product->first()->image) --}}" alt="product-img"> -->
                            </div>
                        </div>
                        <!-- product slider -->

                        <div class="content mt-5 pt-5">
                            <ul class="nav nav-pills  justify-content-center" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                                        role="tab" aria-controls="pills-home" aria-selected="true">Detail Produk</a>
                                </li>
                                <!-- <li class="nav-item">
                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                                        role="tab" aria-controls="pills-profile" aria-selected="false">Specifications</a>
                                </li> -->
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-contact-tab" data-toggle="pill"
                                        href="#pills-contact" role="tab" aria-controls="pills-contact"
                                        aria-selected="false">Ulasan</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                    aria-labelledby="pills-home-tab">
                                    <h3 class="tab-title">Deskripsi Produk</h3>
                                    {!! $product->first()->details !!}
                                </div>
                                <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                                    aria-labelledby="pills-contact-tab">
                                    <h3 class="tab-title">Ulasan Produk</h3>
                                    @if ($reviews->isEmpty())
                                        <div class="product-review">
                                            <h4>Belum ada ulasan untuk produk ini</h4>
                                        </div>
                                    @else
                                        <div class="product-review">
                                            @foreach ($reviews as $review)
                                                <div class="media">
                                                    <!-- Avatar -->
                                                    <img src="{{ url(App\Models\User::find($review->user_id)->avatar) }}"
                                                        alt="Avatar">
                                                    <div class="media-body">
                                                        <!-- Ratings -->
                                                        <div class="ratings">
                                                            <ul class="list-inline">
                                                                @for ($i = 1; $i <= $review->rating; $i++)
                                                                    <li class="list-inline-item">
                                                                        <i class="fa fa-star"></i>
                                                                    </li>
                                                                @endfor
                                                            </ul>
                                                        </div>
                                                        <div class="name">
                                                            <h5>{{ App\Models\User::find($review->user_id)->name }}</h5>
                                                        </div>
                                                        <div class="date">
                                                            <p>{{date('d M Y', strtotime($review->created_at)) }}</p>
                                                        </div>
                                                        <div class="review-comment">
                                                            <p>
                                                                {{ $review->comment }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="sidebar">
                        <div class="widget price text-center" id="check">
                            <div class="row">
                                <div class="col-sm">
                                    <h4>Harga</h4>
                                    <p>{{ number_format($product->first()->price, 0, '', '.') }}</p>
                                </div>
                                <div class="col-sm">
                                    <h4>Stok</h4>
                                    <p>{{ $product->first()->stock }}</p>
                                </div>
                                </div>
                            </div>
                            
                        </div>
                        <!-- User Profile widget -->
                        <div class="widget user text-center">
                            @if (Auth::user() != '')
                                <ul class="list-inline">
                                    <li>
                                        <form action="{{ route('shop.checkout', $product->first()->id) }}"
                                            class="basic-form" method="post">
                                            @csrf
                                            <li class="list-inline-item">