@extends('Shop.layout.layout', [
    'title' => __('home.title'),
])

@section('content')
    <div class="row">
        <div class="col-12">
            <h1>{{ $article['name'] }}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-lg-4">
            <div style="max-width: 100%;">
                @include('components.multi-images', [
                    'image' => $article['image'],
                    'images' => $article['images'],
                ])
            </div>
        </div>
        <div class="col-lg-5 col-xs-12 text-justify">
            {!! $article['description']['variety'] ?? null !!}
            {!! $article['description']['merchandise'] ?? null !!}
            {!! $article['description']['description'] ?? null !!}

            @if ($article['description']['plus'] ?? false)
                <h3>Spécificités</h3>
                {!! $article['description']['plus'] !!}
            @endif

            @if (count($article['tags'] ?? []))
                <h3>Caractéristiques</h3>
                @foreach ($article['tags'] as $tag_group => $items)
                    <div class="mb-2">
                        {{ $tag_group }} :
                        @foreach ($items as $tag)
                            <span class="btn btn-xs btn-secondary pt-0 pb-0">{{ $tag }}</span>
                        @endforeach
                    </div>
                @endforeach
            @endif

            @if ($article['description']['specie'] ?? false)
                <h3 class="mt-3">Complément</h3>
                {!! $article['description']['specie'] ?? null !!}
                {!! $article['description']['producer'] ?? null !!}
            @endif

        </div>
        <div class="col-lg-3 col-xs-12">
            @if (auth('web')->check() && !empty($article['available_sale_channels']))
                <div id="article-admin-offers" class="alert alert-info p-2 mb-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <strong class="d-block mb-0">Offres :</strong>
                        <a href="{{ route('Admin.Shop.Articles.edit', $article['id']) }}" class="text-dark d-inline-flex align-items-center gap-1" style="font-size: 0.95rem;" title="Ouvrir la fiche article en admin" target="_blank" rel="noopener">
                            <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 20h9" />
                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
                            </svg>
                            <span class="sr-only">Éditer l'article</span>
                        </a>
                    </div>
                    <ul class="list-unstyled mb-0 small">
                        @php
                            $currentSaleChannelId = $article['current_sale_channel']['id'] ?? null;
                        @endphp
                        @foreach ($article['available_sale_channels'] as $channel)
                            @php
                                $isCurrentChannel = $currentSaleChannelId === $channel['id'];
                                $priceTaxed = $channel['price_taxed'] ?? null;
                                $quantity = $channel['quantity'] ?? null;
                                $offerStock = $channel['offer_stock_current'] ?? null;
                                $offerIsActive = $channel['offer_is_active'] ?? false;
                                $offerHasStock = $channel['offer_has_stock'] ?? null;
                                $highlightStyle = $isCurrentChannel ? 'background-color: rgba(0, 0, 0, 0.06);' : '';
                                $nameClass = ($offerIsActive && $offerHasStock !== false) ? '' : 'text-muted';
                                $flags = [];
                                if (! $offerIsActive) {
                                    $flags[] = 'inactive';
                                }
                                if ($offerHasStock === false) {
                                    $flags[] = 'no-stock';
                                }
                            @endphp
                            <li style="{{ $highlightStyle }}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <span class="{{ $nameClass }}">
                                        • {{ $channel['name'] }}
                                        <span class="d-block text-muted" style="font-size: 0.85em; padding-left: 0.9em;">
                                            Code {{ $channel['code'] }}{!! $flags ? ' · <strong class="text-dark">'.implode('</strong> · <strong class="text-dark">', $flags).'</strong>' : '' !!}
                                        </span>
                                    </span>
                                    @if ($priceTaxed !== null)
                                        @php
                                            $tariffId = $channel['tariff_id'] ?? null;
                                        @endphp
                                        @if ($tariffId)
                                            <a href="{{ route('Admin.Shop.Tariffs.edit', $tariffId) }}" target="_blank" rel="noopener" title="Ouvrir le tarif" class="ml-2 text-nowrap text-right {{ $nameClass }} text-decoration-none text-reset d-inline-block admin-link-group admin-price-link">
                                                {{ number_format($priceTaxed, 2, ',', ' ') }} € TTC
                                                @if (! empty($quantity))
                                                    <span class="d-block text-muted" style="font-size: 0.85em;">Qté min. {{ $quantity }}</span>
                                                @endif
                                            </a>
                                        @else
                                            <span class="ml-2 text-nowrap text-right {{ $nameClass }}">
                                                {{ number_format($priceTaxed, 2, ',', ' ') }} € TTC
                                                @if (! empty($quantity))
                                                    <span class="d-block text-muted" style="font-size: 0.85em;">Qté min. {{ $quantity }}</span>
                                                @endif
                                            </span>
                                        @endif
                                    @else
                                        <span class="ml-2 text-muted">–</span>
                                    @endif
                                </div>
                                @if (!empty($channel['all_offers']))
                                    <ul class="list-unstyled mb-0 mt-1" style="padding-left: 0.75em;">
                                        @foreach ($channel['all_offers'] as $offer)
                                            @php
                                                $isSelectedOffer = $offer['id'] === $channel['offer_id'];
                                                $offerClass = $offer['is_active'] ? 'text-dark' : 'text-muted';
                                                $stockClass = $offer['stock_current'] > 0 ? 'text-success' : 'text-danger';
                                            @endphp
                                            <li class="small {{ $offerClass }}" style="font-size: 0.85em;">
                                                <a href="{{ route('Admin.Shop.Offers.edit', $offer['id']) }}" target="_blank" rel="noopener" title="Ouvrir l'offre" class="text-decoration-none {{ $offerClass }} admin-link-group admin-offer-link">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <div>
                                                            <span style="opacity: 0.5;">{{ $isSelectedOffer ? '▸' : '○' }}</span>
                                                            @if ($offer['variation_name'])
                                                                {{ $offer['variation_name'] }}
                                                            @endif
                                                            - Stock: <strong class="{{ $stockClass }}">{{ $offer['stock_current'] }}</strong>
                                                            @if (!$offer['is_active'])
                                                                <span class="text-muted">(inactive)</span>
                                                            @endif
                                                        </div>
                                                        <div class="text-right text-nowrap ml-2">
                                                            {{ number_format($offer['price_taxed'], 2, ',', ' ') }} €
                                                            @if ($offer['quantity'] > 1)
                                                                <span class="text-muted">(min {{ $offer['quantity'] }})</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @include('Shop.Articles.partials.ArticleAddBasket')
        </div>
    </div>
@endsection

@include('load.layout.modal')

@if (auth('web')->check() && !empty($article['available_sale_channels']))
    @push('styles')
        <style>
            #article-admin-offers .admin-link-group {
                transition: background-color 0.15s ease;
                border-radius: 3px;
            }

            #article-admin-offers .admin-price-link {
                display: inline-block;
                padding: 2px 4px;
                margin: -2px -4px;
            }

            #article-admin-offers .admin-offer-link {
                display: block;
                padding: 2px 4px;
                margin: -2px -4px;
            }

            #article-admin-offers .admin-link-group:hover,
            #article-admin-offers .admin-link-group:focus,
            #article-admin-offers .admin-link-group.linked-hover {
                background-color: rgba(0, 123, 255, 0.1);
                text-decoration: none;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const container = document.getElementById('article-admin-offers');
                if (!container) {
                    return;
                }

                const links = Array.from(container.querySelectorAll('a.admin-link-group[href]'));
                const grouped = new Map();

                links.forEach((link) => {
                    const href = link.getAttribute('href');
                    if (!grouped.has(href)) {
                        grouped.set(href, []);
                    }
                    grouped.get(href).push(link);
                });

                grouped.forEach((group) => {
                    group.forEach((link) => {
                        const addHighlight = () => group.forEach((item) => item.classList.add('linked-hover'));
                        const removeHighlight = () => group.forEach((item) => item.classList.remove('linked-hover'));

                        link.addEventListener('mouseenter', addHighlight);
                        link.addEventListener('mouseleave', removeHighlight);
                        link.addEventListener('focus', addHighlight);
                        link.addEventListener('blur', removeHighlight);
                    });
                });
            });
        </script>
    @endpush
@endif
