@extends('public.layout.app')
@section('title', $product['title'].' | PACHA PAINTS')

@section('body')
<section class="hero">
    <div class="container">
        <div class="mb-3">
            <a class="btn btn-outline-secondary btn-sm" href="{{ route('front.products') }}">
                <i class="fa-solid fa-arrow-left me-1"></i> Back to Products
            </a>
        </div>

        <div class="row g-4">
            <div class="col-lg-6">
                <div class="cardx p-3">
                    <img class="w-100 rounded-4"
                         src="{{ $product['img'] }}"
                         style="height:460px;object-fit:cover;border:1px solid rgba(37,32,34,.12);"
                         alt="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="pill mb-3"><i class="fa-solid fa-tag brand-dot"></i> {{ $product['category'] }}</div>
                <h2 class="fw-bold mb-2">{{ $product['title'] }}</h2>
                <div class="muted mb-3">{{ $product['code'] }} • Coverage: {{ $product['coverage'] }}</div>

                <div class="cardx p-3 mb-3">
                    <div class="row g-2">
                        <div class="col-md-6"><div class="pill w-100"><i class="fa-solid fa-brush brand-dot"></i> Finish: {{ $product['finish'] }}</div></div>
                        <div class="col-md-6"><div class="pill w-100"><i class="fa-solid fa-clock brand-dot"></i> Dry: {{ $product['dry_time'] }}</div></div>
                        <div class="col-md-12"><div class="pill w-100"><i class="fa-solid fa-box brand-dot"></i> Sizes: {{ $product['sizes'] }}</div></div>
                    </div>
                    <p class="muted mt-3 mb-0">{{ $product['desc'] }}</p>
                </div>

                <div class="d-flex gap-2">
                    <a class="btn btn-brand px-4" href="{{ route('front.order.create',['add'=>$product['slug']]) }}">
                        <i class="fa-solid fa-bag-shopping me-2"></i> Order Now
                    </a>
                    <a class="btn btn-outline-brand px-4" href="{{ route('front.catalogue') }}">
                        <i class="fa-solid fa-file-arrow-down me-2"></i> Catalogue
                    </a>
                </div>
            </div>
        </div>

        @if(count($related))
            <div class="section-pad">
                <div class="d-flex justify-content-between align-items-end mb-3">
                    <div>
                        <h4 class="fw-bold mb-0">Related Products</h4>
                        <div class="muted">Same category picks</div>
                    </div>
                </div>

                <div class="row g-3">
                    @foreach($related as $p)
                        <div class="col-md-6 col-lg-3">
                            <div class="cardx p-3 h-100">
                                <img class="product-img" src="{{ $p['img'] }}" alt="">
                                <div class="fw-bold mt-2">{{ $p['title'] }}</div>
                                <div class="muted small">{{ $p['code'] }}</div>
                                <a class="btn btn-outline-brand btn-sm mt-3 w-100"
                                   href="{{ route('front.products.show',$p['slug']) }}">View</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

    </div>
</section>
@endsection