@extends('front::layouts.master')

@section('content')
    <div class="page-title-area">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="container">
                    <div class="page-title-content">
                        <h2 class="font-bold">{{ $product->title }}</h2>
                        <div class="m-2 custom-breadcrumb">
                            <a href="{{ route('front.index') }}"> {{ __('messages.index.main-page') }} </a> > <a href="{{ route('front.categories.show', ['category' => $product->category->slug]) }}">{{ $product->category->title }}</a> > <a href="{{ route('front.products.show', ['product' => $product->slug]) }}">{{ $product->title }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Section -->
    <div class="container mt-5">
        <div class="row">
            <!-- Product Image -->
            <div class="col-md-5">
                <img id="mainImage" src="{{ asset($product->image) }}" alt="Product Image" class="img-fluid">
                <div class="d-flex justify-content-center mt-3 gallery">
                    @foreach ($product->gallery as $gallery)
                        <img src="{{ asset($gallery->image) }}" alt="Product Image 1" class="thumbnail" onclick="changeImage('{{ asset($gallery->image) }}')">
                    @endforeach
                </div>
            </div>
            <!-- Product Details -->
            <div class="col-md-7">
                <h3 class="font-weight-bold">{{ $product->title }}</h3>
                <p class="text-justify">{{ $product->short_description }}</p>

                @if ($product->specificationGroups()->count())
                    <table class="table table-bordered table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">{{ __('messages.index.specification') }}</th>
                                <th scope="col">{{ __('messages.index.value') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($product->specifications->take(5) as $specificate)
                                <tr>
                                    <td>{{ $specificate->name }}</td>
                                    <td>{!! nl2br(htmlentities($specificate->pivot->value)) !!}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif

                @if($product->prices->first()->price != 100)
                <span class="price">{{ $product->getLowestPrice() }}</span>
                @endif

                <!-- Add to Cart Button -->
                <div class="mt-3 call-us">
                    @if ($product->catalog)
                        <a class="btn btn-primary" href="{{ asset($product->catalog) }}" target="_blank">{{ __('messages.index.catalog-download') }}</a>
                    @endif
                    <a href="tel:{{ option("info_tel") }}" class="btn btn-success">{{ __('messages.index.call-us') }}</a>
                </div>
            </div>
        </div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">{{ __('messages.index.description') }}</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" id="specifications-tab" data-toggle="tab" href="#specifications" role="tab" aria-controls="specifications" aria-selected="false">{{ __('messages.index.technical-specifications') }}</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content mt-3 mb-5">
            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                {!! $product->description !!}
            </div>

            <div class="tab-pane fade" id="specifications" role="tabpanel" aria-labelledby="specifications-tab">
                <h4>ویژگی‌های فنی</h4>
                @if ($product->specificationGroups()->count())
                    <table class="table table-bordered table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">ویژگی</th>
                                <th scope="col">مقدار</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($product->specifications as $specificate)
                                <tr>
                                    <td>{{ $specificate->name }}</td>
                                    <td>{!! nl2br(htmlentities($specificate->pivot->value)) !!}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>

        @if ($related_products->count())
            <section class="services-area py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 title-dev">
                            <h3 class="rel-title">{{ __('messages.index.related-products') }}</h3>
                        </div>
                    </div>
                    <div class="row mt-4">
                        @foreach ($related_products as $relProduct)
                            <div class="col-md-3">
                                <div class="service-box position-relative">
                                    <a class="text-dark text-decoration-none" href="{{ route('front.products.show', ['product' => $relProduct]) }}">
                                        <img src="{{ $relProduct->image }}" alt="{{ $relProduct->title }}" class="img-fluid">
                                        <div class="overlay">
                                            <div class="text-center">
                                                <span>{{ $relProduct->title }}</span>
                                                <br>
                                                <small>{{ $relProduct->getLowestPrice() }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

    </div>
@endsection

@push('scripts')
    <script>
        function changeImage(src) {
            document.getElementById('mainImage').src = src;
        }
    </script>
@endpush