@extends('layouts.base')
@section('title', 'Detail Services')
@section('content')

<section class="imagebg image--light cover cover-blocks bg-primary-100">
    <div class="background-image-holder hidden-xs">
        <img alt="background" src="{{ asset('assets/img/images/cover/about-us.png') }}" />
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center text-3xl font-bold text-primary-500 md:text-5xl mt-4">Detail Produk</h1>
            </div>
        </div>
    </div>
</section>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-lg pt-4 pb-4">
                <div class="row no-gutters align-items-center gap-6">
                    <!-- Image -->
                    <div class="col-md-4 ml-4">
                        <img src="{{ $product->getFirstMediaUrl('products') }}" alt="{{ $product->title }}" class="img-fluid">
                    </div>
                    <!-- Description -->
                    <div class="card-body">
                        <h3 class="font-bold text-2xl">{{ $product->title }}</h3>
                        <p class="font-semibold text-2xl text-primary-500 mb-1">{{ $product->subtitle }}</p>
                        <hr class="w-32 h-1 bg-primary-500 mb-4">
                        <p class="card-text"><strong>Fix Size Sheets:</strong> 21 / 23 cm [ 8.2" / 9.05" ]</p>
                        <p class="card-text"><strong>Sheets:</strong> 150/235/50</p>
                        <p class="card-text"><strong>Emboss:</strong> Full</p>
                        <p class="card-text"><strong>Fold:</strong> 1/3</p>
                        <p class="card-text"><strong>Variable Size Length:</strong> 22 - 24 cm [ 9.05" - 9.4" ]</p>
                        <p class="card-text"><strong>Length:</strong> -</p>
                        <p class="card-text"><strong>Max Diameter:</strong> -</p>
                        <p class="card-text"><strong>Perforation:</strong> -</p>
                        <p class="card-text"><strong>Core Diameter:</strong> -</p>
                        <p class="card-text"><strong>Type:</strong> Quilted/Non Quilted</p>
                        <p class="card-text"><strong>Weight:</strong> -</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection