@extends('layouts.app')

@section('title', $product['name'] . ' · IZONE Africa × Magic City')

@section('content')

    <div class="pdp-wrap">

        <nav class="pdp-breadcrumb" aria-label="Breadcrumb">
            <a href="{{ url('/') }}">Home</a>
            <span>/</span>
            <a href="{{ url('/shop') }}">Shop</a>
            @foreach($product['category_names'] as $catName)
                <span>/</span>
                <a href="{{ url('/shop?cat=' . ($product['cats'][$loop->index] ?? '')) }}">{{ $catName }}</a>
            @endforeach
            <span>/</span>
            <span aria-current="page">{{ $product['name'] }}</span>
        </nav>

        <div class="pdp-grid">
            <div class="pdp-gallery origin-{{ $product['origin'] }}">
                @if($product['thumb_is_image'])
                    <img src="{{ $product['thumb'] }}" alt="{{ $product['name'] }}" loading="eager">
                @else
                    <div class="pdp-thumb" role="img" aria-label="{{ $product['name'] }}">{{ $product['thumb'] }}</div>
                @endif
                <span class="pdp-brand-chip {{ $product['origin'] }}">{{ $product['origin_label'] }}</span>
                @if($product['discount'])
                    <span class="pdp-badge">{{ $product['discount'] }}</span>
                @endif
            </div>

            <div class="pdp-info">
                @if(count($product['category_names']) > 0)
                    <div class="pdp-cat-chip">
                        @foreach($product['category_names'] as $catName)
                            <span>{{ $catName }}</span>
                        @endforeach
                    </div>
                @endif

                <h1 class="pdp-name">{{ $product['name'] }}</h1>

                <div class="pdp-price">
                    @if($product['price_from'])
                        <span class="pdp-from">From</span>
                    @endif
                    @if($product['old'])
                        <span class="old">{{ $product['old'] }}</span>
                    @endif
                    <span class="new" id="pdpPriceDisplay">{{ $product['price'] }}</span>
                </div>
                <div class="pdp-vat-controls" id="pdpVatControls">
                    <button type="button" class="pdp-vat-btn active" data-vat="exclusive" onclick="setVatMode('exclusive')">VAT Exclusive</button>
                    <button type="button" class="pdp-vat-btn" data-vat="inclusive" onclick="setVatMode('inclusive')">Include VAT</button>
                    <span class="pdp-vat-note" id="pdpVatNote">Prices shown exclude VAT</span>
                </div>
                @if($product['savings'])
                    <div class="pdp-savings">{{ $product['savings'] }}</div>
                @endif

                @if($product['show_stock_status'])
                    <div class="pdp-stock {{ $product['stock_status'] !== 'in_stock' ? 'alert' : '' }}">
                        {{ $product['stock_label'] }}
                    </div>
                @endif

                @if($product['gift_pack'] && !empty($product['gift_pack_items']))
                    <div class="pdp-gift-pack-compact" id="pdpGiftPack">
                        <span class="pdp-gift-label">🎁 FREE GIFT PACK</span>
                        <div class="pdp-gift-items-inline">
                            @foreach($product['gift_pack_items'] as $item)
                                <span class="pdp-gift-item-inline">
                                    <span class="pdp-gift-icon">{{ $item['icon'] ?? '🎁' }}</span>
                                    <span class="pdp-gift-name">{{ $item['name'] }}</span>
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if(($product['digital_delivery'] ?? 'none') === 'download')
                    <div class="pdp-digital">Instant digital delivery — file download after payment.</div>
                @elseif(($product['digital_delivery'] ?? 'none') === 'service')
                    <div class="pdp-digital">Digital service — delivered via your registered contact.</div>
                @endif

                @if($product['short_description'])
                    <p class="pdp-desc">{{ $product['short_description'] }}</p>
                @endif

                <div class="pdp-sku">SKU: {{ $product['sku'] }}</div>

                @if(! empty($product['attributes']) || ! empty($product['text_fields']))
                    <div class="pdp-config">
                        <div class="pdp-options" id="pdpOptions">
                            @foreach($product['attributes'] as $attribute)
                                @if(strtolower($attribute['slug']) !== 'screen-type' && strtolower($attribute['name']) !== 'screen type')
                                <div class="option-group" data-option-group="{{ $attribute['slug'] }}" data-option-name="{{ $attribute['name'] }}">
                                    <div class="option-label">{{ $attribute['name'] }} <span class="option-required">*</span></div>
                                    <div class="option-values">
                                        @foreach($attribute['options'] as $option)
                                            <button type="button" class="opt-btn" data-opt-slug="{{ $attribute['slug'] }}" data-opt-value="{{ $option['value'] }}">{{ $option['label'] }}</button>
                                        @endforeach
                                    </div>
                                </div>
                                @endif
                            @endforeach
                            @foreach($product['text_fields'] as $field)
                                <div class="option-group" data-text-field="{{ $field['slug'] }}" data-option-name="{{ $field['name'] }}">
                                    <div class="option-label">{{ $field['name'] }} <span class="option-optional">(optional)</span></div>
                                    <textarea class="opt-text" name="opt-{{ $field['slug'] }}" rows="2" placeholder="{{ $field['placeholder'] ?? '' }}" aria-label="{{ $field['name'] }}"></textarea>
                                </div>
                            @endforeach
                        </div>

                        <div class="pdp-wp-preference" id="pdpWpPreference" hidden>
                            <label class="pdp-wp-label">
                                <input type="checkbox" name="wp_send_customization" id="wpSendCustomization" class="pdp-wp-checkbox">
                                <span>Send my customization details to WhatsApp</span>
                            </label>
                            <label class="pdp-wp-label">
                                <input type="checkbox" name="wp_remember_preference" id="wpRememberPreference" class="pdp-wp-checkbox" checked>
                                <span>Remember my preference</span>
                            </label>
                        </div>
                    </div>
                @endif

                @if(! empty($product['variants']))
                    <script type="application/json" id="pdpVariants">{!! json_encode($product['variants'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
                    <div class="pdp-variant-selector" id="pdpVariantSelector">
                        <div class="pdc-head">📱 Select Variant</div>
                        <div class="pdp-variant-options" id="pdpVariantOptions">
                            @foreach($product['variants'] as $index => $variant)
                                @php
                                    // Map each option value to its attribute name
                                    $labeledOptions = [];
                                    foreach (($variant['options'] ?? []) as $oi => $optVal) {
                                        $attrName = $product['attributes'][$oi]['name'] ?? null;
                                        $labeledOptions[] = $attrName ? $attrName . ' – ' . $optVal : $optVal;
                                    }
                                    $variantLabel = implode(' | ', $labeledOptions);
                                    $variantPrice = $variant['sale_price'] ?? $variant['price'] ?? 0;
                                    $isDefault = $index === 0;
                                @endphp
                                <button type="button"
                                    class="pdp-variant-btn {{ $isDefault ? 'active' : '' }}"
                                    data-variant-index="{{ $index }}"
                                    data-variant-price="{{ number_format($variantPrice, 0) }}"
                                    data-variant-label="{{ $variantLabel }}"
                                    onclick="selectVariant({{ $index }})">
                                    <span class="pdp-variant-label">{{ $variantLabel }}</span>
                                    <span class="pdp-variant-price">KSh {{ number_format($variantPrice, 0) }}</span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif


                <div class="pdp-buy">
                    <div class="pdp-qty" aria-label="Quantity">
                        <button id="pdpQtyMinus" aria-label="Decrease quantity">−</button>
                        <input id="pdpQty" type="number" value="1" min="1" max="{{ $product['stock_quantity'] > 0 ? $product['stock_quantity'] : 99 }}" aria-label="Quantity" inputmode="numeric">
                        <button id="pdpQtyPlus" aria-label="Increase quantity">+</button>
                    </div>
                    @if($product['stock_status'] === 'out_of_stock')
                        <button class="pdp-add is-disabled {{ $product['origin'] }}" type="button" disabled>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6h15l-1.5 9h-12z"/><path d="M6 6 5 3H2"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/></svg>
                            Out of Stock
                        </button>
                    @else
                        <button class="pdp-add {{ $product['origin'] }}" id="pdpAddBtn"
                            data-id="{{ $product['id'] }}" data-name="{{ $product['name'] }}"
                            data-price="{{ $product['price'] }}" data-base-price="{{ $product['price'] }}" data-thumb="{{ $product['thumb'] }}"
                            onclick="pdpAdd()">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 6h15l-1.5 9h-12z"/><path d="M6 6 5 3H2"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/></svg>
                            Add to Cart
                        </button>
                    @endif
                    <button class="pdp-wish" id="pdpWishBtn" onclick="toggleWishlist(this)" aria-label="Save to wishlist">♡ Wishlist</button>
                </div>

                @if(! empty($product['customizable']))
                    <button class="pdc-btn" type="button" data-open-support="customize" data-customize-flow="{{ $product['customize_flow'] ?? 'laptop' }}">
                        <span class="pdc-label">{{ $product['customize_label'] ?? '✨ Customize for Me' }}</span>
                        @if(! empty($product['customize_sub']))
                            <span class="pdc-sub">{{ $product['customize_sub'] }}</span>
                        @endif
                    </button>
                    <button class="pdc-btn" type="button" data-open-support="customize" data-customize-flow="{{ $product['customize_flow'] ?? 'laptop' }}">
                        <span class="pdc-label">Send customization to WhatsApp</span>
                    </button>
                @endif

                <div class="pdp-pay-options">
                    <div class="ppl">Payment & delivery</div>
                    <div class="pdp-pay-row">
                        <button class="pdp-pay-btn pdp-pay-inspect" onclick="pdpOpenPopup('inspectPopup')">👁️ Inspect Before You Pay<small>Pay on delivery</small></button>
                        <button class="pdp-pay-btn pdp-pay-lipa" onclick="pdpOpenPopup('lipaPopup')">🛡️ Lipa Polepole — Chukua Baadaye<small>Reserve · pay in installments · released after full payment</small></button>
                    </div>
                    <div class="pdp-lpp-note">Lipa Pole Pole (reserve & pay later) means the item is reserved with an agreed deposit and released only after full payment — not "take home and pay while using". Payment terms remain informational until a payment milestone.</div>
                </div>

                <div class="pdp-trust">
                    <div class="trust-chip" onclick="pdpOpenPopup('inspectPopup')" style="cursor:pointer"><div class="ic">✅</div><b>Inspect</b>Before you pay</div>
                    <div class="trust-chip" onclick="pdpDeliveryAssistant()" style="cursor:pointer"><div class="ic">🚚</div><b>Delivery</b>7–14 days</div>
                    <div class="trust-chip" onclick="pdpOpenSupport()" style="cursor:pointer"><div class="ic">💬</div><b>Support</b>{{ $shop['contacts']['contact_phone_1'] ?? 'Call anytime' }}</div>
                </div>

                <div class="pdp-delivery" onclick="pdpDeliveryAssistant()" style="cursor:pointer">
                    <div class="pdd-head">🚚 Deliver to</div>
                    <select class="pdd-select" id="pdpDeliverTo" aria-label="Deliver to" onclick="event.stopPropagation()">
                        @forelse(($shop['delivery_locations'] ?? []) as $location)
                            <option>{{ $location }}</option>
                        @empty
                            <option>Nairobi</option>
                        @endforelse
                    </select>
                    <div class="pdd-note">Delivery fee & time are confirmed per location — open the delivery assistant for a quote.</div>
                </div>
            </div>
        </div>

        @if($product['accessories'])
            <div class="pdp-fbt" id="pdpFbt">
                <h3>Frequently Bought Together — Optional Add-ons</h3>
                <div class="pdp-fbt-grid" id="pdpFbtGrid">
                    @foreach($product['accessories'] as $acc)
                        @php $c = $acc['component'] ?? $acc; @endphp
                        @if(($c['stock_status'] ?? 'in_stock') !== 'out_of_stock')
                            <div class="pdp-fbt-card">
                                <div class="pdp-fbt-card-main">
                                    <img src="{{ $c['thumb'] }}" alt="{{ $c['name'] }}" class="pdp-fbt-thumb" loading="lazy">
                                    <div class="pdp-fbt-card-info">
                                        <strong>{{ $c['name'] }}</strong>
                                        <span class="pdp-fbt-price">KSh {{ number_format((int) ($c['price_num'] ?? 0), 0) }}</span>
                                    </div>
                                </div>
                                <label class="pdp-fbt-card-checkbox-label">
                                    <input type="checkbox" class="fbt-checkbox" data-acc-id="{{ $c['id'] }}" data-acc-price="{{ $c['price_num'] ?? 0 }}">
                                    <span class="checkmark"></span>
                                    <span class="fbt-add-text">Add to cart</span>
                                </label>
                                <span class="pdp-fbt-stock {{ ($c['stock_status'] ?? '') === 'low_stock' ? 'low' : '' }}">{{ $c['stock'] ?? 'In Stock' }}</span>
                            </div>
                        @else
                            <div class="pdp-fbt-card out-of-stock">
                                <img src="{{ $c['thumb'] }}" alt="{{ $c['name'] }}" class="pdp-fbt-thumb" loading="lazy">
                                <div class="pdp-fbt-card-info">
                                    <strong>{{ $c['name'] }}</strong>
                                    <span class="pdp-fbt-price">KSh {{ number_format((int) ($c['price_num'] ?? 0), 0) }}</span>
                                </div>
                                <span class="pdp-fbt-stock out">Out of Stock</span>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="pdp-fbt-summary">
                    <div class="pdp-fbt-selected">Selected: <span id="fbt-selected-count">0</span></div>
                    <div class="pdp-fbt-total">Bundle total: KSh <span id="fbt-total">0</span></div>
                    <button class="pdp-fbt-btn" id="pdpFbtAddBtn" onclick="addSelectedToCart()" disabled>Add Selected to Cart</button>
                </div>
            </div>
        @endif

        @if(count($product['specs']) > 0)
            <section class="pdp-specs" id="specifications">
                <h2 class="pdp-section-title">Specifications</h2>
                <table class="pdp-spec-table">
                    <tbody>
                        @foreach($product['specs'] as $spec)
                            <tr>
                                <th scope="row">{{ $spec['name'] }}</th>
                                <td>{{ $spec['value'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </section>
        @endif

        @if($product['description'])
            <section class="pdp-desc-block" id="description">
                <h2 class="pdp-section-title">Description</h2>
                <p>{{ $product['description'] }}</p>
            </section>
        @endif

        <section class="deals-section" id="related-products">
            <div class="deals-head">
                <div>
                    <h2>Related Products</h2>
                    <p>Hand-picked products that pair well with this one.</p>
                </div>
            </div>

            <div class="deals-track-wrap">
                <button class="deals-arrow prev" aria-label="Scroll left">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                </button>

                <div class="deals-track">
                    @forelse($related as $relatedCard)
                        <x-product.card :product="$relatedCard" />
                    @empty
                        <div class="deals-empty">
                            <div class="deals-empty-emoji">📦</div>
                            <div class="deals-empty-title">No related picks yet</div>
                            <div class="deals-empty-text">Related products will appear here once they are linked in the admin panel.</div>
                        </div>
                    @endforelse
                </div>

                <button class="deals-arrow next" aria-label="Scroll right">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </button>
            </div>
        </section>

    </div>

    <div class="pdp-sticky-bar" id="pdpStickyBar" aria-hidden="false">
        <div class="psb-inner">
            <div class="psb-info">
                <div class="psb-name">{{ $product['name'] }}</div>
                <div class="psb-variant" id="psbVariant" style="display:none; font-size:10px; color:var(--magic-gold); font-weight:700; text-transform:uppercase; letter-spacing:.05em;"></div>
                <div class="psb-price">
                    <span id="psbPrice">{{ $product['price'] }}</span>
                    <span id="psbCount" class="psb-count" style="display:none;"> · <span id="psbCountNum">0</span> items in cart</span>
                </div>
            </div>
            <div class="psb-actions">
                @if($product['stock_status'] !== 'out_of_stock')
                    <button class="psb-add {{ $product['origin'] }}" type="button" onclick="pdpAdd()" id="psbAddBtn">🛒 Add</button>
                @endif
                <a href="{{ url('/cart') }}" class="psb-view" id="psbViewCart" style="display:none;">View Cart</a>
                <a href="{{ url('/checkout') }}" class="psb-checkout" id="psbCheckout" style="display:none;">Checkout</a>
            </div>
        </div>
    </div>

    {{-- ================= PDP POPUPS ================= --}}

    {{-- Gift Customization Popup --}}
    <div class="pdp-popup-overlay" id="giftPopup" role="dialog" aria-label="Customize This Gift">
        <div class="pdp-popup-box">
            <div class="pdp-popup-head">
                <h3>🎁 Customize This Gift</h3>
                <button class="pdp-popup-close" onclick="pdpClosePopup('giftPopup')" aria-label="Close">&times;</button>
            </div>
            <form class="pdp-popup-body" id="giftForm" onsubmit="event.preventDefault(); pdpGiftSubmit();">
                <p>Tell us about your gift. We'll prepare it and send you a confirmation on WhatsApp before delivery.</p>

                <div class="gift-field">
                    <label for="giftCustomerName">Your Name *</label>
                    <input type="text" id="giftCustomerName" name="customer_name" required placeholder="e.g. Alice Mwangi">
                </div>
                <div class="gift-field">
                    <label for="giftCustomerPhone">Your Phone *</label>
                    <input type="tel" id="giftCustomerPhone" name="customer_phone" required placeholder="e.g. 0712 345 678">
                </div>
                <div class="gift-field">
                    <label for="giftRecipientName">Recipient Name *</label>
                    <input type="text" id="giftRecipientName" name="recipient_name" required placeholder="Who is this gift for?">
                </div>
                <div class="gift-field">
                    <label for="giftMessage">Gift Message</label>
                    <textarea id="giftMessage" name="gift_message" rows="3" placeholder="e.g. Happy Birthday, Mum! Love from your family."></textarea>
                </div>
                <div class="gift-field">
                    <label for="giftRequirements">Special Requirements</label>
                    <textarea id="giftRequirements" name="gift_requirements" rows="2" placeholder="e.g. Include a teddy bear, wrap in blue paper…"></textarea>
                </div>
                <div class="gift-field">
                    <label for="giftDeliveryLocation">Delivery Location *</label>
                    <input type="text" id="giftDeliveryLocation" name="delivery_location" required placeholder="e.g. Kilimani, Nairobi">
                </div>
                <div class="gift-field">
                    <label for="giftDeliveryMethod">Delivery Method *</label>
                    <select id="giftDeliveryMethod" name="delivery_method" required>
                        <option value="">Select delivery method</option>
                        <option value="Our Rider (KSh 300)">Our Rider (KSh 300)</option>
                        <option value="G4S Courier">G4S Courier</option>
                        <option value="Wells Fargo">Wells Fargo</option>
                        <option value="Parcel Grid (KSh 590)">Parcel Grid (KSh 590)</option>
                        <option value="Home Coach / Shuttle">Home Coach / Shuttle</option>
                        <option value="Urgent Delivery">Urgent Delivery</option>
                        <option value="Pickup from IZONE Office">Pickup from IZONE Office</option>
                    </select>
                </div>
            </form>
            <div class="pdp-popup-foot">
                <button class="btn-secondary" onclick="pdpClosePopup('giftPopup')">Cancel</button>
                <button class="btn-primary" onclick="pdpGiftSubmit()">✅ Confirm & Send</button>
            </div>
        </div>
    </div>

    {{-- Gift Confirmation Popup --}}
    <div class="pdp-popup-overlay" id="giftConfirmPopup" role="dialog" aria-label="Confirm Gift Details">
        <div class="pdp-popup-box">
            <div class="pdp-popup-head">
                <h3>Confirm Your Gift Details</h3>
                <button class="pdp-popup-close" onclick="pdpClosePopup('giftConfirmPopup')" aria-label="Close">&times;</button>
            </div>
            <div class="pdp-popup-body">
                <p>Review your customization details. When you tap "Send to WhatsApp" below, we'll send this as a WhatsApp message for confirmation.</p>
                <div style="background:rgba(255,255,255,.04);border-radius:12px;padding:14px;margin-top:10px;max-height:200px;overflow-y:auto;font-size:13px;color:var(--text-muted);line-height:1.6;white-space:pre-wrap;" id="giftSummaryText"></div>
                <p style="margin-top:14px;font-size:12px;"><b>Next steps:</b> We'll confirm availability, delivery timing, and final pricing via WhatsApp before proceeding.</p>
            </div>
            <div class="pdp-popup-foot">
                <button class="btn-secondary" onclick="pdpGiftBack()">← Edit</button>
                <button class="btn-primary" onclick="pdpGiftConfirm()">💬 Send to WhatsApp</button>
            </div>
        </div>
    </div>

    {{-- Inspect Before You Pay Popup --}}
    <div class="pdp-popup-overlay" id="inspectPopup" role="dialog" aria-label="Inspect Before You Pay">
        <div class="pdp-popup-box">
            <div class="pdp-popup-head">
                <h3>👁️ Inspect Before You Pay</h3>
                <button class="pdp-popup-close" onclick="pdpClosePopup('inspectPopup')" aria-label="Close">&times;</button>
            </div>
            <div class="pdp-popup-body">
                <p>Our delivery partner brings the item to your location. <b>You inspect it first — only pay if you're satisfied.</b></p>

                <div class="term-item">No upfront payment — pay when the rider arrives.</div>
                <div class="term-item">Open and inspect the package before paying.</div>
                <div class="term-item">If the item doesn't match the description, you can decline and pay nothing.</div>
                <div class="term-item">Payment is via M-Pesa (Lipa Na M-Pesa) or cash — your choice.</div>
                <div class="term-item">A small delivery fee applies (shown at checkout).</div>

                <p style="margin-top:16px;">Our rider will contact you by phone before delivery. Please have your ID ready for verification.</p>
            </div>
            <div class="pdp-popup-foot">
                <button class="btn-secondary" onclick="pdpClosePopup('inspectPopup')">Close</button>
                <button class="btn-primary" onclick="pdpClosePopup('inspectPopup'); pdpAdd();">✅ Add to Cart — Pay on Delivery</button>
            </div>
        </div>
    </div>

    {{-- Lipa Polepole Popup --}}
    <div class="pdp-popup-overlay" id="lipaPopup" role="dialog" aria-label="Lipa Polepole">
        <div class="pdp-popup-box">
            <div class="pdp-popup-head">
                <h3>🛡️ Lipa Polepole — Chukua Baadaye</h3>
                <button class="pdp-popup-close" onclick="pdpClosePopup('lipaPopup')" aria-label="Close">&times;</button>
            </div>
            <div class="pdp-popup-body">
                <p><b>Reserve this item now, pay in installments, and receive it once fully paid.</b></p>

                <div class="term-item">A <b>KSh 50</b> commitment fee is required upfront to activate your Lipa Polepole account.</div>
                <div class="term-item">After activation, you can pay any amount at any time — as little or as much as you choose.</div>
                <div class="term-item">The item is reserved and held for you until fully paid.</div>
                <div class="term-item">Once fully paid, you choose your delivery method: Our Rider, G4S, Wells Fargo, Parcel Grid, or pickup.</div>
                <div class="term-item">All payments and agreements are tracked via WhatsApp for transparency.</div>

                <p style="margin-top:16px;">To start, add the item to cart and pay the KSh 50 commitment fee via M-Pesa. You'll receive a confirmation on WhatsApp with your account balance and next steps.</p>
            </div>
            <div class="pdp-popup-foot">
                <button class="btn-secondary" onclick="pdpClosePopup('lipaPopup')">Close</button>
                <button class="btn-primary" onclick="pdpClosePopup('lipaPopup'); pdpAdd();">✅ Add to Cart — Reserve Now</button>
            </div>
        </div>
    </div>

@endsection