@extends('master', ['title' => __('dashboard.show_product')])

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-12 mb-2">
                <a href="{{ route('products.edit', $product->id) }}" class="btn btn-warning">
                    <i class="fas fa-edit"></i> {{ __('dashboard.edit_product') }}
                </a>
            </div>
        </div>

        <div class="card">
            <div class="card-header border-bottom">
                <div class="d-flex justify-content-between align-items-center w-100">
                    <h4 class="card-title">{{ __('dashboard.product_name') }}:
                        {{ $product->getTranslation('name', app()->getLocale()) }}</h4>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge {{ $product->is_active ? 'bg-success' : 'bg-danger' }}">
                            {{ $product->is_active ? __('dashboard.active') : __('dashboard.inactive') }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-body mt-2">
                <div class="row">
                    <!-- Image Section -->
                    <div class="col-md-5">
                        <div class="product-gallery">
                            @if ($product->images->count())
                                <div class="main-image-container bg-light rounded text-center p-2 mb-2">
                                    <img src="{{ getPath('products', $product->id, $product->images->first()->path) }}"
                                        id="main-product-image" class="img-fluid rounded" style="max-height: 400px;">
                                </div>
                                <div class="thumbnail-container d-flex flex-wrap gap-2">
                                    @foreach ($product->images as $image)
                                        <img src="{{ getPath('products', $product->id, $image->path) }}" width="70"
                                            class="rounded cursor-pointer border thumbnail-img {{ $loop->first ? 'border-primary' : '' }}"
                                            onclick="changeMainImage(this)">
                                    @endforeach
                                </div>
                            @else
                                <div class="bg-light rounded text-center p-5">
                                    <i class="fas fa-image fa-4x text-muted"></i>
                                    <p class="mt-2 text-muted">{{ __('dashboard.no_images_available') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Details Section -->
                    <div class="col-md-7">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <th>{{ __('dashboard.price') }}</th>
                                        <td><span class="h4 text-success">{{ $product->price }}</span></td>
                                    </tr>
                                        <tr>
                                            <th>{{ __('dashboard.discount_price') }}</th>
                                            <td><span>{{ $product->selling_price }}</span>
                                        </tr>
                                    @if($product->is_best_value)
                                        <tr>
                                            <th>{{ __('dashboard.best_value') }}</th>
                                            <td><span class="h5 text-danger">{{ $product->discount_price }}</span>
                                                ({{ $product->units }} {{ __('dashboard.units') }})</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <th>{{ __('dashboard.stock') }}</th>
                                        <td><span
                                                class="badge {{ $product->stock > 0 ? 'bg-info' : 'bg-danger' }}">{{ $product->stock }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('dashboard.category') }}</th>
                                        <td>{{ $product->category?->getTranslation('name', app()->getLocale()) }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('dashboard.brand') }}</th>
                                        <td>{{ $product->brand?->getTranslation('name', app()->getLocale()) }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('dashboard.package_weight') }}</th>
                                        <td>{{ $product->package_weight }} {{ __('dashboard.' . $product->weight_unit) }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('dashboard.is_best_seller') }}</th>
                                        <td>
                                            @if($product->is_best_seller)
                                                <span class="badge bg-primary"><i class="fas fa-star text-warning"></i>
                                                    {{ __('dashboard.yes') }}</span>
                                            @else
                                                <span class="badge bg-secondary">{{ __('dashboard.no') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Nutritional Info Section -->
                @if($product->nutritional_info)
                    @php $nutrition = json_decode($product->nutritional_info, true) @endphp
                    @if(!empty($nutrition))
                        <div class="row mt-4">
                            <div class="col-12">
                                <h5 class="border-bottom pb-1 mb-2">{{ __('dashboard.nutritional_info') }}</h5>
                                <div class="row">
                                    @foreach($nutrition as $key => $value)
                                        <div class="col-md-3 mb-2">
                                            <div class="p-2 border rounded bg-light">
                                                <small
                                                    class="text-muted d-block text-capitalize">{{ str_replace('_', ' ', $key) }}</small>
                                                <strong>{{ $value }}</strong>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function changeMainImage(img) {
            // Change main image src
            $('#main-product-image').attr('src', $(img).attr('src'));

            // Update thumbnail borders
            $('.thumbnail-img').removeClass('border-primary');
            $(img).addClass('border-primary');
        }

        $(document).ready(function () {
             // Status toggle removed
        });
    </script>
    <style>
        .cursor-pointer {
            cursor: pointer;
        }

        .thumbnail-img:hover {
            border-color: #7367f0 !important;
        }

        .thumbnail-img {
            transition: all 0.2s;
        }
    </style>
@endpush