@extends('layouts.store')

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

@section('content')
<div class="mw-page-hero">
    <div class="container">
        <div class="mw-breadcrumb">
            <a href="{{ route('home') }}">Home</a> /
            <a href="{{ route('shop') }}">Shop</a> /
            {{ $product->name }}
        </div>
    </div>
</div>

<section class="mw-section" style="padding-top:1rem">
    <div class="container mw-detail">
        <div class="mw-detail-gallery">
            <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                 onerror="this.src='{{ asset('images/placeholder-product.svg') }}'">
        </div>
        <div>
            @if($product->is_on_sale)<span class="mw-sale" style="position:static;display:inline-block;margin-bottom:.5rem">Sale</span>@endif
            <h1>{{ $product->name }}</h1>
            <div class="mw-price" style="font-size:1.4rem;margin-bottom:1rem">
                @if($product->is_on_sale)
                    <del>₹{{ number_format($product->regular_price, 0) }}</del>
                @endif
                ₹{{ number_format($product->price, 0) }}
            </div>
            <div class="mw-rich">{!! \App\Models\Product::richHtml($product->short_description) !!}</div>
            @if($product->stock_status === 'instock')
                <form action="{{ route('cart.add', $product) }}" method="POST">
                    @csrf
                    <div class="mw-qty">
                        <label for="qty">Qty</label>
                        <input id="qty" type="number" name="qty" value="1" min="1" max="50">
                        <button class="mw-btn" type="submit">Add to Cart</button>
                    </div>
                </form>
            @endif
        </div>
    </div>
</section>

@if($product->description)
<section class="mw-section" style="padding-top:0">
    <div class="container mw-panel">
        <h2 style="margin-top:0">Description</h2>
        <div class="mw-rich">{!! \App\Models\Product::richHtml($product->description) !!}</div>
    </div>
</section>
@endif

@if($related->count())
<section class="mw-section" style="padding-top:0">
    <div class="container">
        <div class="mw-section-head"><h2>Related Products</h2></div>
        <div class="mw-products">
            @foreach($related as $item)
                <x-product-card :product="$item" />
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection