@extends('layouts.app')

@section('title', $product->name)

@push('styles')
<style>
    .product-gallery-main {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 1.5rem;
        background: linear-gradient(135deg, #dff4ee, #f4fbf8);
        border: 1px solid rgba(16,33,41,.08);
    }
    .product-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        gap: .75rem;
    }
    .product-gallery-button {
        display: block;
        padding: 0;
        border: 2px solid transparent;
        border-radius: 1rem;
        background: transparent;
        overflow: hidden;
        transition: border-color .2s ease, transform .2s ease;
    }
    .product-gallery-button.is-active {
        border-color: var(--brand-sea);
    }
    .product-gallery-button:hover {
        transform: translateY(-1px);
    }
    .product-gallery-thumb {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: .9rem;
        border: 0;
    }
    .product-richtext p:last-child,
    .product-richtext ul:last-child,
    .product-richtext ol:last-child {
        margin-bottom: 0;
    }
    .product-richtext ul,
    .product-richtext ol {
        padding-left: 1.2rem;
    }
    .product-richtext li + li {
        margin-top: .35rem;
    }
    .fish-picker {
        border: 1px solid rgba(16,33,41,.1);
        border-radius: 1rem;
        background: rgba(255,255,255,.8);
    }
    .fish-picker summary {
        list-style: none;
        cursor: pointer;
        padding: 1rem 1.1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .fish-picker summary::-webkit-details-marker {
        display: none;
    }
    .fish-picker summary::after {
        content: "+";
        font-size: 1.25rem;
        line-height: 1;
        color: var(--brand-sea);
    }
    .fish-picker[open] summary::after {
        content: "-";
    }
    .fish-picker-body {
        padding: 0 1.1rem 1.1rem;
        border-top: 1px solid rgba(16,33,41,.08);
    }
    .fish-option {
        border: 1px solid rgba(16,33,41,.08);
        border-radius: 1rem;
        padding: .85rem;
        display: flex;
        gap: .65rem;
        align-items: flex-start;
        height: 100%;
        background: #fff;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="row g-4">
        <div class="col-12">
            <div class="card section-card">
                <div class="card-body p-4">
                    <div class="row g-3 mb-4">
                        <div class="col-12">
                            <img
                                src="{{ $product->primaryImageUrl() }}"
                                alt="{{ $product->name }}"
                                class="product-gallery-main"
                                id="productMainImage"
                            >
                        </div>
                        @if($product->images->count() > 1)
                            <div class="col-12">
                                <div class="product-gallery-grid">
                                    @foreach($product->images->sortByDesc('is_primary')->sortBy('sort_order')->values() as $index => $image)
                                        <button
                                            type="button"
                                            class="product-gallery-button {{ $index === 0 ? 'is-active' : '' }}"
                                            data-gallery-thumb
                                            data-image-src="{{ $image->url() }}"
                                            data-image-alt="{{ $image->alt_text ?: $product->name }}"
                                            aria-label="Show image {{ $index + 1 }}"
                                        >
                                            <img src="{{ $image->url() }}" alt="{{ $image->alt_text ?: $product->name }}" class="product-gallery-thumb">
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                    <span class="badge badge-soft mb-2">{{ $product->category?->name }}</span>
                    <h1>{{ $product->name }}</h1>
                    <div class="d-flex flex-wrap gap-3 align-items-center mb-3">
                        <span class="fs-4 fw-bold">@money($product->current_price)</span>
                        <span class="text-muted">SKU: {{ $product->sku }}</span>
                        <span class="text-muted">{{ $product->stock_quantity > 0 ? 'In stock' : 'Out of stock' }}</span>
                    </div>
                    <div class="product-richtext">{!! $product->description !!}</div>

                    @if($product->width_cm || $product->height_cm || $product->depth_cm)
                        <div class="small text-muted mb-3">
                            Size:
                            @if($product->width_cm) W {{ rtrim(rtrim(number_format((float) $product->width_cm, 2, '.', ''), '0'), '.') }}cm @endif
                            @if($product->height_cm) · H {{ rtrim(rtrim(number_format((float) $product->height_cm, 2, '.', ''), '0'), '.') }}cm @endif
                            @if($product->depth_cm) · D {{ rtrim(rtrim(number_format((float) $product->depth_cm, 2, '.', ''), '0'), '.') }}cm @endif
                        </div>
                    @endif

                    @if ($product->is_live_stock)
                        <div class="alert alert-warning">Live animal shipping notice: ensure someone is available to receive livestock deliveries promptly and review the DOA and shipping policy before ordering.</div>
                    @endif

                    @if ($product->allow_backorders)
                        <div class="alert alert-info">
                            Backorder notice: there is no confirmed delivery date yet. We will keep you updated weekly, and if you want to cancel at any time just let us know.
                        </div>
                    @endif

                    @if (! $product->is_returnable)
                        <div class="alert alert-secondary">
                            Return policy: this item cannot be returned once dispatched unless it is faulty. Livestock and plants also cannot be refused once they have been in a tank.
                        </div>
                    @endif

                    <form method="post" action="{{ route('cart.store', $product) }}" class="row g-2">
                        @csrf
                        <div class="col-sm-3 col-md-2">
                            <input type="number" name="quantity" value="1" min="1" class="form-control">
                        </div>
                        <div class="col-sm-9 col-md-4">
                            <button class="btn btn-primary w-100" @disabled($product->stock_quantity < 1 && ! $product->allow_backorders)>Add to cart</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @if ($product->isStarterKit())
            @php($kitProducts = $product->starterKitProducts())
            @php($kitContentsTotal = $product->starterKitContentsTotal())
            @php($kitSavingsAmount = $product->starterKitSavingsAmount())
            <div class="col-12">
                <div class="card section-card">
                    <div class="card-body p-4">
                        <div class="d-flex flex-wrap justify-content-between gap-3 align-items-start mb-3">
                            <div>
                                <h2 class="h3 mb-1">What&apos;s Included</h2>
                                <p class="text-muted mb-0">This kit groups together the products below so customers can buy the setup as one bundle.</p>
                            </div>
                            <div class="text-md-end">
                                <div class="small text-muted">Contents total: @money($kitContentsTotal)</div>
                                @if($kitSavingsAmount > 0)
                                    <div class="fw-bold text-brand">Save @money($kitSavingsAmount)</div>
                                @endif
                                @if(filled($product->meta['kit_savings_text'] ?? null))
                                    <div class="small text-muted">{{ $product->meta['kit_savings_text'] }}</div>
                                @endif
                            </div>
                        </div>

                        @if($kitProducts->isNotEmpty())
                            <div class="row g-3">
                                @foreach($kitProducts as $kitProduct)
                                    <div class="col-md-6 col-lg-4">
                                        <div class="border rounded-4 p-3 h-100">
                                            <div class="small text-muted mb-1">{{ $kitProduct->category?->name }}</div>
                                            <strong class="d-block mb-1">{{ $kitProduct->name }}</strong>
                                            <div class="small text-muted mb-2">{{ strip_tags((string) $kitProduct->short_description) }}</div>
                                            <div class="fw-semibold">@money($kitProduct->current_price)</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="alert alert-info mb-0">No kit items have been linked to this starter kit yet.</div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <div class="col-12">
            <div class="card section-card">
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-md-4">
                            <h3 class="h5">Care notes</h3>
                            <div class="small text-muted mb-0 product-richtext">{!! $product->care_notes ?: 'Care notes can be managed per product in the admin panel.' !!}</div>
                        </div>
                        <div class="col-md-4">
                            <h3 class="h5">Compatibility notes</h3>
                            <div class="small text-muted mb-0 product-richtext">{!! $product->compatibility_notes ?: ($product->isShrimpType() ? 'Keep shrimp with conservative tank mates and stable parameters.' : 'Review temperament, space, and tank mate suitability before mixing species.') !!}</div>
                        </div>
                        <div class="col-md-4">
                            <h3 class="h5">Shipping notes</h3>
                            <div class="small text-muted mb-0 product-richtext">{!! $product->shipping_notes ?: 'Courier and tracking information appears during checkout and in the customer account area.' !!}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($product->isShrimpType())
            <div class="col-12">
                <div class="card section-card">
                    <div class="card-body p-4">
                        <h2 class="h3">Shrimp parameter profile</h2>
                        <div class="row g-3 small">
                            <div class="col-6 col-md-4"><strong>pH</strong><br>{{ $product->ph_min }} - {{ $product->ph_max }}</div>
                            <div class="col-6 col-md-4"><strong>GH</strong><br>{{ $product->gh_min }} - {{ $product->gh_max }}</div>
                            <div class="col-6 col-md-4"><strong>KH</strong><br>{{ $product->kh_min }} - {{ $product->kh_max }}</div>
                            <div class="col-6 col-md-4"><strong>TDS</strong><br>{{ $product->tds_min }} - {{ $product->tds_max }}</div>
                            <div class="col-6 col-md-4"><strong>Temperature</strong><br>{{ $product->temperature_min }} - {{ $product->temperature_max }} °C</div>
                            @if($product->difficulty_level)
                                <div class="col-6 col-md-4"><strong>Difficulty</strong><br>{{ $product->difficulty_level }}</div>
                            @endif
                        </div>
                        <hr>
                        <h3 class="h5">Suitability calculator</h3>
                        <form method="post" action="{{ route('compatibility.evaluate', $product) }}" class="row g-3">
                            @csrf
                            <div class="col-6 col-md-4"><select name="ph" class="form-select"><option value="">pH</option>@foreach(['5.5','5.8','6.0','6.2','6.4','6.6','6.8','7.0','7.2','7.4','7.6'] as $value)<option value="{{ $value }}" @selected(old('ph') == $value)>{{ $value }}</option>@endforeach</select></div>
                            <div class="col-6 col-md-4"><select name="gh" class="form-select"><option value="">GH</option>@foreach(range(3,12) as $value)<option value="{{ $value }}" @selected((string) old('gh') === (string) $value)>{{ $value }}</option>@endforeach</select></div>
                            <div class="col-6 col-md-4"><select name="kh" class="form-select"><option value="">KH</option>@foreach(range(0,8) as $value)<option value="{{ $value }}" @selected((string) old('kh') === (string) $value)>{{ $value }}</option>@endforeach</select></div>
                            <div class="col-6 col-md-4"><select name="tds" class="form-select"><option value="">TDS</option>@foreach([90,110,130,150,180,200,220,250,280] as $value)<option value="{{ $value }}" @selected((string) old('tds') === (string) $value)>{{ $value }}</option>@endforeach</select></div>
                            <div class="col-6 col-md-4"><select name="temperature" class="form-select"><option value="">Temperature</option>@foreach(range(18,27) as $value)<option value="{{ $value }}" @selected((string) old('temperature') === (string) $value)>{{ $value }} °C</option>@endforeach</select></div>
                            <div class="col-6 col-md-4"><select name="tank_size" class="form-select"><option value="">Tank size</option>@foreach([10,20,30,45,60,90,120] as $value)<option value="{{ $value }}" @selected((string) old('tank_size') === (string) $value)>{{ $value }} L</option>@endforeach</select></div>
                            <div class="col-12"><select name="tank_age" class="form-select"><option value="">Tank maturity / age</option><option value="under_4_weeks" @selected(old('tank_age') === 'under_4_weeks')>Under 4 weeks</option><option value="1_3_months" @selected(old('tank_age') === '1_3_months')>1 to 3 months</option><option value="3_6_months" @selected(old('tank_age') === '3_6_months')>3 to 6 months</option><option value="6_months_plus" @selected(old('tank_age') === '6_months_plus')>6 months+</option></select></div>
                            <div class="col-12">
                                <details class="fish-picker" @if(old('fish_species')) open @endif>
                                    <summary>
                                        <span>Fish currently kept</span>
                                        <span class="small text-muted">Open to choose tank mates</span>
                                    </summary>
                                    <div class="fish-picker-body">
                                        <div class="row g-3 pt-3">
                                            @foreach ($fishSpecies as $fish)
                                                <div class="col-md-6 col-lg-4">
                                                    <label class="fish-option">
                                                        <input type="checkbox" name="fish_species[]" value="{{ $fish->id }}" @checked(in_array((string) $fish->id, old('fish_species', []), true))>
                                                        <span>{{ $fish->common_name }}<br><span class="small text-muted">{{ $fish->category }}</span></span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </details>
                            </div>
                            <div class="col-12">
                                <details class="fish-picker" @if(old('snail_species')) open @endif>
                                    <summary>
                                        <span>Snails currently kept</span>
                                        <span class="small text-muted">Open to choose snail species</span>
                                    </summary>
                                    <div class="fish-picker-body">
                                        <div class="row g-3 pt-3">
                                            @foreach ($snailSpecies as $snail)
                                                <div class="col-md-6 col-lg-4">
                                                    <label class="fish-option">
                                                        <input type="checkbox" name="snail_species[]" value="{{ $snail->id }}" @checked(in_array((string) $snail->id, old('snail_species', []), true))>
                                                        <span>{{ $snail->common_name }}<br><span class="small text-muted">{{ $snail->category }}</span></span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </details>
                            </div>
                            <div class="col-12"><button class="btn btn-primary">Check suitability</button></div>
                        </form>

                        @if (session('compatibility_result'))
                            @php($result = session('compatibility_result'))
                            <div class="alert alert-info mt-4">
                                <strong>{{ $result['status'] }}</strong> ({{ $result['score'] }}%)<br>
                                {{ $result['summary'] }}
                            </div>
                            @if (!empty($result['warnings']))
                                <div class="alert alert-warning mt-3 mb-3">
                                    <strong>Warnings</strong>
                                    <ul class="mb-0 mt-2">
                                        @foreach ($result['warnings'] as $warning)
                                            <li>{{ $warning }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="row g-3">
                                @foreach ($result['checks'] as $label => $check)
                                    <div class="col-6 col-md-4">
                                        <div class="border rounded-4 p-3 small">
                                            <strong>{{ $label }}</strong><br>
                                            Input: {{ $check['value'] }}<br>
                                            Target: {{ $check['min'] }} - {{ $check['max'] }}<br>
                                            <span class="{{ $check['inRange'] ? 'text-success' : 'text-danger' }}">{{ $check['inRange'] ? 'In range' : 'Out of range' }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @if ($result['fishWarnings'])
                                <div class="mt-3">
                                    <h4 class="h6">Fish compatibility notes</h4>
                                    @foreach ($result['fishWarnings'] as $warning)
                                        <div class="border rounded-4 p-3 small mb-2">
                                            <strong>{{ $warning['fish'] }}</strong> - {{ str_replace('_', ' ', $warning['level']) }}<br>
                                            {{ $warning['notes'] }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            @if ($result['snailWarnings'])
                                <div class="mt-3">
                                    <h4 class="h6">Snail compatibility notes</h4>
                                    @foreach ($result['snailWarnings'] as $warning)
                                        <div class="border rounded-4 p-3 small mb-2">
                                            <strong>{{ $warning['snail'] }}</strong> - {{ str_replace('_', ' ', $warning['level']) }}<br>
                                            {{ $warning['notes'] }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        @endif

        @if($relatedProducts->count())
            <div class="col-12">
                <div class="card section-card">
                    <div class="card-body p-4">
                        <h3 class="h5">Related products</h3>
                        <div class="row g-3">
                            @foreach($relatedProducts as $related)
                                <div class="col-md-6 col-lg-4">
                                    <a href="{{ route('products.show', $related) }}" class="text-decoration-none border rounded-4 p-3 d-flex gap-3 align-items-center h-100">
                                        <img src="{{ $related->primaryImageUrl() }}" alt="{{ $related->name }}" class="rounded-3" style="width:72px;height:72px;object-fit:cover;">
                                        <span>
                                            <strong class="d-block text-dark">{{ $related->name }}</strong>
                                            <span class="small text-muted">@money($related->current_price)</span>
                                        </span>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    (() => {
        const mainImage = document.getElementById('productMainImage');
        const thumbnails = Array.from(document.querySelectorAll('[data-gallery-thumb]'));

        if (!mainImage || thumbnails.length === 0) {
            return;
        }

        thumbnails.forEach((thumbnail) => {
            thumbnail.addEventListener('click', () => {
                mainImage.src = thumbnail.dataset.imageSrc || mainImage.src;
                mainImage.alt = thumbnail.dataset.imageAlt || mainImage.alt;

                thumbnails.forEach((item) => item.classList.remove('is-active'));
                thumbnail.classList.add('is-active');
            });
        });
    })();
</script>
@endpush