@extends('frontend.layouts.app')

@push("content")
<div class="rts-brad-crumb-area breadcrumb-image bg_image">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-inner ptb--130 pt_sm--80 pb_sm--80">
                    <h1 class="title sal-animate" data-sal-delay="300" data-sal-duration="800" data-sal="slide-up">Product
                        Details</h1>
                    <div class="breadcrumb-list">
                        <a href="{{ route('home') }}" data-sal-delay="300" data-sal-duration="800" data-sal="slide-up"
                            class="sal-animate">Home</a>
                        <span>/</span>
                        <a class="deactive sal-animate" href="{{route('product.index')}}" data-sal-delay="400" data-sal-duration="800"
                            data-sal="slide-up">Product</a>
                        <span>/</span>
                        <a class="active sal-animate" href="#" data-sal-delay="500" data-sal-duration="800"
                            data-sal="slide-up">Details</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="rts-add-to-cart-area rts-section-gapTop">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6">
                <div class="rts-shop-details-tab-wrapper">
                    <!-- tab Button start -->
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <img src="{{ $data->getFirstMediaUrl('image') }}" alt="{{ $data->name }}">
                        </div>
                    </div>
                    {{-- <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <img src="{{ $data->getFirstMediaUrl('image') }}" alt="{{ $data->name }}">
                        </div>
                    </div> --}}
                    {{-- <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <img src="assets/images/product/details/lg-01.jpg" alt="Nft-Details">
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <img src="assets/images/product/details/lg-01.jpg" alt="Nft-Details">
                        </div>
                        <div class="tab-pane fade active show" id="contact" role="tabpanel"
                            aria-labelledby="contact-tab">
                            <img src="assets/images/product/details/lg-01.jpg" alt="Nft-Details">
                        </div>
                    </div> --}}
                    <!-- tab Button start -->
                    <!-- tab content start -->
                    {{-- <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                                type="button" role="tab" aria-controls="home" aria-selected="false">
                                <img src="assets/images/product/details/01.png" alt="Nft-Details">
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                                type="button" role="tab" aria-controls="profile" aria-selected="false">
                                <img src="assets/images/product/details/01.png" alt="Nft-Details">
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="contact-tab" data-bs-toggle="tab"
                                data-bs-target="#contact" type="button" role="tab" aria-controls="contact"
                                aria-selected="true">
                                <img src="assets/images/product/details/01.png" alt="Nft-Details">
                            </button>
                        </li>
                    </ul> --}}
                    <!-- tab content End -->
                </div>
            </div>
            <div class="col-lg-6">
                <div class="rts-shop-details-right-wrapper">
                    <h3 class="title animated fadeIn sal-animate" data-sal-delay="300" data-sal-duration="800"
                        data-sal="slide-up">{{ $data->name }}</h3>
                    <div class="star-icon-wrapper sal-animate" data-sal-delay="400" data-sal-duration="800"
                        data-sal="slide-up">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p class="price sal-animate" data-sal-delay="500" data-sal-duration="800" data-sal="slide-up">
                        Regular Price: <strong> ${{ $data->price }}</strong> </p>
                    <p class="disc sal-animate" data-sal-delay="600" data-sal-duration="800" data-sal="slide-up">
                        {!! $data->excerpt !!}
                    </p>
                    <p class="name sal-animate" data-sal-delay="700" data-sal-duration="800" data-sal="slide-up">
                        Product Name: <strong> {{ $data->name }}</strong></p>
                    <p class="category sal-animate" data-sal-delay="800" data-sal-duration="800" data-sal="slide-up">
                        Category: <strong>
                            @php
                                $categoryNames = $data->categories->pluck('name')->implode(', ');
                            @endphp
                            {{ $categoryNames }}
                        </strong></p>

                    <div class="button-wrapper sal-animate" data-sal-delay="500" data-sal-duration="800"
                        data-sal="slide-up">
                        <div class="counter-button">
                            <button class="button">-</button>
                            <input class="input" value="1">
                            <button class="button">+</button>
                        </div>
                        <a class="rts-btn btn-primary btn-md" href="#">Add To Cart</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-12">
            {!!$data->content!!}
            </div>
        </div>
    </div>
</div>
@endpush