@extends('layouts.user')

@section('title')
Product Details
@endsection

@section('content')

@php
    // NEXUS Session State -- uses SessionController's existing methods.
    // When engine is inactive, all values stay false/null and the session banner is hidden.
    $nexusActive = \App\Nexus\Engine\NexusConfig::isNexusActive();
    $sessionOpen = false;
    $sessionEndTime = null;
    $nextSessionTime = null;

    if ($nexusActive) {
        $sc = new \App\Nexus\Engine\SessionController();
        $activeSession = $sc->getActiveSession();
        $sessionOpen = ($activeSession !== null);

        if ($sessionOpen) {
            $durationMinutes = \App\Nexus\Engine\NexusConfig::getInt('session_duration_minutes', 60);
            $sessionEndTime = \Carbon\Carbon::parse($activeSession->actual_start)
                ->addMinutes($durationMinutes)
                ->toIso8601String();
        } else {
            $nextSessionTime = $sc->getNextSessionTime()->toIso8601String();
        }
    }
    
    // Bid margin from market (applies regardless of NEXUS state)
    $bidMarginPercent = $product->market?->bid_margin;
    $bidMinAmount = ($bidMarginPercent && $product->value) ? round($product->value * ($bidMarginPercent / 100), 2) : null;
@endphp

<style>
    :root {
        --orange: #f97316;
        --orange-dim: rgba(249, 115, 22, 0.12);
        --orange-glow: rgba(249, 115, 22, 0.28);
        --sky: #0ea5e9;
        --sky-dim: rgba(14, 165, 233, 0.10);
        --sky-border: rgba(14, 165, 233, 0.28);
        --card-bg: #ffffff;
        --card-border: rgba(0, 0, 0, 0.07);
        --muted: #94a3b8;
        --radius: 16px;
        --radius-sm: 10px;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.13);
        --ease: cubic-bezier(.4, 0, .2, 1);
    }

    .dark {
        --card-bg: #0f172a;
        --card-border: rgba(255, 255, 255, 0.07);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.6);
    }

    /* ── page shell ── */
    .pd-hero {
        background: linear-gradient(135deg, #fff7ed 0%, #fdf2ff 100%);
        padding: 5.5rem 0 2.5rem;
    }

    .dark .pd-hero {
        background: linear-gradient(135deg, #1e1206 0%, #160b1e 100%);
    }

    /* ── breadcrumb ── */
    .breadcrumb-item {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    /* ── image gallery ── */
    .gallery-wrap {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .thumb-col {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .thumb-btn {
        width: 68px;
        height: 68px;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid var(--card-border);
        cursor: pointer;
        transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
        background: none;
        padding: 0;
    }

    .thumb-btn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .thumb-btn:hover,
    .thumb-btn.active {
        border-color: var(--orange);
        transform: scale(1.04);
    }

    .main-img-wrap {
        flex: 1;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        aspect-ratio: 4/3;
        background: var(--card-border);
        position: relative;
    }

    .img-showcase {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.42s var(--ease);
    }

    .img-showcase img {
        min-width: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        flex-shrink: 0;
    }

    /* ── product info panel ── */
    .info-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow);
        padding: 1.75rem;
    }

    .product-title {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    .price-tag {
        display: inline-flex;
        align-items: baseline;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .price-current {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--orange);
    }

    .price-old {
        font-size: 0.9rem;
        color: #ef4444;
        text-decoration: line-through;
    }

    .stars-row {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.5rem;
    }

    .star {
        color: #f59e0b;
        font-size: 0.9rem;
    }

    .rating-text {
        font-size: 0.72rem;
        color: var(--muted);
        margin-left: 0.3rem;
    }

    .stock-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.28rem 0.75rem;
        border-radius: 99px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .stock-in {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .stock-out {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .stock-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .divider {
        height: 1px;
        background: var(--card-border);
        margin: 1.25rem 0;
    }

    /* ── wallet source selector ── */
    .wallet-source-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .wallet-option {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
        border-radius: var(--radius-sm);
        border: 2px solid var(--card-border);
        cursor: pointer;
        transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
        position: relative;
        user-select: none;
        background: var(--card-bg);
    }

    .wallet-option:hover {
        border-color: rgba(149, 163, 184, 0.4);
    }

    .wallet-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .wallet-option.selected-main {
        border-color: var(--orange);
        background: var(--orange-dim);
        box-shadow: 0 0 0 3px var(--orange-glow);
    }

    .wallet-option.selected-ictp {
        border-color: var(--sky);
        background: var(--sky-dim);
        box-shadow: 0 0 0 3px var(--sky-border);
    }

    .wallet-icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1rem;
        transition: background 0.18s;
    }

    .wallet-icon-main {
        background: var(--orange-dim);
        color: var(--orange);
    }

    .wallet-icon-ictp {
        background: var(--sky-dim);
        color: var(--sky);
    }

    .wallet-label {
        font-size: 0.78rem;
        font-weight: 700;
    }

    .wallet-balance {
        font-size: 0.72rem;
        color: var(--muted);
        margin-top: 1px;
    }

    .wallet-check {
        margin-left: auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid var(--card-border);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.18s var(--ease);
    }

    .selected-main .wallet-check {
        border-color: var(--orange);
        background: var(--orange);
    }

    .selected-ictp .wallet-check {
        border-color: var(--sky);
        background: var(--sky);
    }

    .wallet-check svg {
        display: none;
    }

    .selected-main .wallet-check svg,
    .selected-ictp .wallet-check svg {
        display: block;
    }

    /* ictp badge */
    .ictp-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.12rem 0.45rem;
        border-radius: 99px;
        background: var(--sky-dim);
        color: var(--sky);
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        border: 1px solid var(--sky-border);
        vertical-align: middle;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: 0.4
        }
    }

    .live-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--sky);
        display: inline-block;
        animation: blink 1.6s ease-in-out infinite;
    }

    /* ── NEXUS session banner (pill with pulse dot) ── */
    @keyframes pulse-ring {
        0% { transform: scale(1); opacity: 0.6; }
        100% { transform: scale(2.2); opacity: 0; }
    }
    .nexus-session-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.65rem 1rem;
        border-radius: 99px;
        margin-bottom: 1.25rem;
    }
    .nexus-session-banner.session-open {
        background: rgba(16, 185, 129, 0.08);
        border: 1.5px solid rgba(16, 185, 129, 0.25);
    }
    .nexus-session-banner.session-closed {
        background: rgba(148, 163, 184, 0.06);
        border: 1.5px solid rgba(148, 163, 184, 0.18);
    }
    .session-left {
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }
    .session-dot {
        position: relative;
        width: 8px;
        height: 8px;
        flex-shrink: 0;
    }
    .session-dot::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
    }
    .session-open .session-dot::before { background: #10b981; }
    .session-closed .session-dot::before { background: #94a3b8; }
    .session-open .session-dot::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.4);
        animation: pulse-ring 2s ease-out infinite;
    }
    .session-label {
        font-size: 0.72rem;
        font-weight: 600;
    }
    .session-open .session-label { color: #065f46; }
    .session-closed .session-label { color: #64748b; }
    .dark .session-open .session-label { color: #6ee7b7; }
    .dark .session-closed .session-label { color: #94a3b8; }
    .session-timer {
        font-size: 0.82rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        padding: 0.2rem 0.7rem;
        border-radius: 6px;
    }
    .session-open .session-timer { background: rgba(16, 185, 129, 0.12); color: #059669; }
    .session-closed .session-timer { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }
    .place-bid-btn:disabled {
        background: #94a3b8;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }
    .place-bid-btn:disabled:hover {
        background: #94a3b8;
        transform: none;
        box-shadow: none;
    }

    /* ── bid form inputs ── */
    .bid-input-wrap {
        position: relative;
        margin-top: 0.5rem;
    }

    .bid-input-icon {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
        display: flex;
        align-items: center;
    }

    .bid-input {
        width: 100%;
        height: 44px;
        padding: 0 1rem 0 2.5rem;
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--card-border);
        background: var(--card-bg);
        color: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        outline: none;
        transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
    }

    .bid-input:focus {
        border-color: var(--orange);
        box-shadow: 0 0 0 3px var(--orange-dim);
    }

    .bid-input::placeholder {
        color: var(--muted);
        font-weight: 400;
    }

    /* bid minimum note */
    .bid-min-note {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        background: rgba(249, 115, 22, 0.06);
        border: 1px solid rgba(249, 115, 22, 0.12);
        font-size: 0.7rem;
        color: #9a3412;
        line-height: 1.4;
    }
    .dark .bid-min-note {
        background: rgba(249, 115, 22, 0.08);
        border-color: rgba(249, 115, 22, 0.18);
        color: #fb923c;
    }
    .bid-min-note svg {
        flex-shrink: 0;
        color: var(--orange);
    }

    .field-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: inherit;
        letter-spacing: 0.01em;
    }

    /* live total preview */
    .total-preview {
        margin-top: 0.75rem;
        padding: 0.7rem 1rem;
        border-radius: var(--radius-sm);
        background: var(--orange-dim);
        border: 1px solid rgba(249, 115, 22, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: opacity 0.2s;
    }

    .total-preview.hidden-preview {
        opacity: 0;
        pointer-events: none;
    }

    .total-label {
        font-size: 0.72rem;
        color: var(--orange);
        font-weight: 600;
    }

    .total-value {
        font-size: 1rem;
        font-weight: 800;
        color: var(--orange);
    }

    /* place bid button */
    .place-bid-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-sm);
        border: none;
        background: var(--orange);
        color: #fff;
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: background 0.18s var(--ease), transform 0.15s var(--ease), box-shadow 0.18s var(--ease);
        box-shadow: 0 3px 14px var(--orange-glow);
        margin-top: 1.25rem;
    }

    .place-bid-btn:hover {
        background: #ea6c0a;
        transform: translateY(-1px);
        box-shadow: 0 5px 20px var(--orange-glow);
    }

    .place-bid-btn:active {
        transform: scale(0.98);
    }

    /* ── tabs ── */
    .tab-nav {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .tab-nav-btn {
        width: 100%;
        text-align: left;
        padding: 0.6rem 1rem;
        border-radius: var(--radius-sm);
        border: none;
        background: transparent;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        color: var(--muted);
        transition: background 0.18s var(--ease), color 0.18s var(--ease);
    }

    .tab-nav-btn:hover,
    .tab-nav-btn.active {
        background: var(--orange-dim);
        color: var(--orange);
    }

    .tab-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow);
        padding: 1.5rem;
    }

    .tab-panel {
        display: none;
    }

    .tab-panel.active {
        display: block;
    }

    /* ── bids table ── */
    .bids-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.78rem;
    }

    .bids-table th {
        padding: 0.65rem 0.85rem;
        text-align: left;
        font-size: 0.67rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        background: rgba(248, 250, 252, 0.9);
        border-bottom: 1px solid var(--card-border);
    }

    .dark .bids-table th {
        background: rgba(15, 23, 42, 0.9);
    }

    .bids-table td {
        padding: 0.75rem 0.85rem;
        border-bottom: 1px solid var(--card-border);
        vertical-align: middle;
    }

    .bids-table tr:last-child td {
        border-bottom: none;
    }

    .bids-table tr:hover td {
        background: rgba(249, 115, 22, 0.025);
    }

    .in-progress-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.2rem 0.6rem;
        border-radius: 99px;
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        font-size: 0.68rem;
        font-weight: 700;
    }

    /* ── back link ── */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--orange);
        text-decoration: none;
        transition: gap 0.18s var(--ease);
    }

    .back-link:hover {
        gap: 0.55rem;
        color: var(--orange);
    }

    /* ── addinfo table ── */
    .addinfo-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .addinfo-table td {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--card-border);
    }

    .addinfo-table tr:last-child td {
        border-bottom: none;
    }

    .addinfo-table .info-key {
        font-weight: 700;
        width: 130px;
    }

    .addinfo-table .info-val {
        color: var(--muted);
    }

    /* section heading accent */
    .sh {
        font-size: 0.95rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .sh::before {
        content: '';
        width: 3px;
        height: 1rem;
        border-radius: 2px;
        background: var(--orange);
        flex-shrink: 0;
    }
</style>

<!-- Hero -->
<section class="pd-hero">
    <div class="container relative">
        <div class="mt-14">
            <h3 class="text-3xl font-bold" style="letter-spacing:-0.02em;">{{ ucfirst($product->name) }}</h3>
        </div>
        <div class="mt-3" style="display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;">
            <a href="{{ route('bid-markets') }}" class="breadcrumb-item" style="color:var(--muted);text-decoration:none;transition:color 0.15s;"
                onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--muted)'">Bid Market</a>
            <span style="color:var(--muted);">›</span>
            <span class="breadcrumb-item" style="color:var(--muted);">Market Place</span>
            <span style="color:var(--muted);">›</span>
            <span class="breadcrumb-item" style="color:var(--orange);">Product Details</span>
        </div>
    </div>
</section>

<div class="container" style="padding-top:1.25rem;">
    <x-alert />
    <a href="{{ route('home') }}" class="back-link" style="display:inline-flex;margin-bottom:1rem;">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back To My Store
    </a>
</div>

<!-- Main -->
<section style="padding: 1.5rem 0 4rem;">
    <div class="container">

        {{-- ── Top: Gallery + Info ── --}}
        <div class="grid items-start grid-cols-1 gap-6 md:grid-cols-2">

            {{-- Gallery --}}
            <div class="gallery-wrap">
                <div class="thumb-col">
                    <button class="thumb-btn active" data-id="0" onclick="showImg(0,this)">
                        <img src="{{ asset('storage/products/'.$product->image1) }}" alt="">
                    </button>
                    <button class="thumb-btn" data-id="1" onclick="showImg(1,this)">
                        <img src="{{ asset('storage/products/'.$product->image2) }}" alt="">
                    </button>
                    <button class="thumb-btn" data-id="2" onclick="showImg(2,this)">
                        <img src="{{ asset('storage/products/'.$product->image3) }}" alt="">
                    </button>
                </div>
                <div class="main-img-wrap">
                    <div class="img-showcase" id="imgShowcase">
                        <img src="{{ asset('storage/products/'.$product->image1) }}" alt="product image">
                        <img src="{{ asset('storage/products/'.$product->image2) }}" alt="product image">
                        <img src="{{ asset('storage/products/'.$product->image3) }}" alt="product image">
                    </div>
                </div>
            </div>

            {{-- Info --}}
            <div class="info-card">
                <h1 class="product-title">{{ ucfirst($product->name) }}</h1>

                <div class="price-tag">
                    <span class="price-current">${{ number_format($product->value, 2) }}</span>
                    <span style="font-size:0.72rem;color:var(--muted);font-weight:600;">Auction Value</span>
                    <span class="price-old">${{ number_format($product->old_value, 2) }}</span>
                </div>

                {{-- Stars --}}
                <div class="stars-row">
                    @php $r = floatval($product->rating); @endphp
                    @for($i = 1; $i <= 5; $i++)
                        @if($r>= $i)
                        <span class="star">★</span>
                        @elseif($r >= $i - 0.5)
                        <span class="star" style="opacity:0.55;">★</span>
                        @else
                        <span class="star" style="opacity:0.2;">★</span>
                        @endif
                        @endfor
                        <span class="rating-text">{{ number_format($product->rating,1) }} rating</span>
                </div>

                <div class="divider"></div>

                {{-- Stock --}}
                @if($product->status == 1)
                <span class="stock-badge stock-in"><span class="stock-dot"></span> In Stock</span>
                @else
                <span class="stock-badge stock-out"><span class="stock-dot"></span> Out Of Stock</span>
                @endif

                {{-- Overview --}}
                <div style="margin-top:1rem;">
                    <p class="field-label" style="margin-bottom:0.4rem;">Overview</p>
                    <p style="font-size:0.85rem;color:var(--muted);line-height:1.65;">{{ $product->description }}</p>
                </div>

                @if($product->status == 1)
                <div class="divider"></div>

                {{-- NEXUS Session Banner -- only visible when engine is active --}}
                @if($nexusActive)
                <div class="nexus-session-banner {{ $sessionOpen ? 'session-open' : 'session-closed' }}" id="nexus-session-banner">
                    <div class="session-left">
                        <div class="session-dot"></div>
                        <span class="session-label" id="session-label">{{ $sessionOpen ? 'Session Active' : 'Session Closed' }}</span>
                    </div>
                    <span class="session-timer" id="session-countdown">--:--</span>
                </div>
                @endif

                {{-- Bid Form --}}
                <form action="{{ route('place-bid', $product->id) }}" method="post" id="bidForm">
                    @csrf

                    {{-- Wallet source selector --}}
                    <p class="field-label" style="margin-bottom:0.6rem;">Pay from:</p>
                    <div class="wallet-source-wrap">

                        {{-- Main balance option --}}
                        <label class="wallet-option selected-main" id="opt-main" for="ws-main">
                            <input type="radio" name="wallet_source" id="ws-main" value="main" checked onchange="selectWallet('main')">
                            <div class="wallet-icon wallet-icon-main">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                </svg>
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div class="wallet-label">Main Wallet</div>
                                <div class="wallet-balance">Available: <strong style="color:inherit;">${{ number_format(auth()->user()->balance, 2) }} USDT</strong></div>
                            </div>
                            <div class="wallet-check">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 24 24" stroke="#fff" stroke-width="3.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                        </label>

                        {{-- ICTP balance option --}}
                        <label class="wallet-option" id="opt-ictp" for="ws-ictp">
                            <input type="radio" name="wallet_source" id="ws-ictp" value="ictp" onchange="selectWallet('ictp')">
                            <div class="wallet-icon wallet-icon-ictp">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                    <line x1="6" y1="3" x2="6" y2="6" stroke-linecap="round" />
                                    <rect x="4" y="6" width="4" height="7" rx="1" />
                                    <line x1="6" y1="13" x2="6" y2="21" stroke-linecap="round" />
                                    <line x1="14" y1="2" x2="14" y2="5" stroke-linecap="round" />
                                    <rect x="12" y="5" width="4" height="9" rx="1" />
                                    <line x1="14" y1="14" x2="14" y2="21" stroke-linecap="round" />
                                </svg>
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div class="wallet-label">
                                    ICTP Balance
                                    <span class="ictp-pill"><span class="live-dot"></span>ICTP</span>
                                </div>
                                <div class="wallet-balance">Available: <strong style="color:inherit;">${{ number_format(auth()->user()->ictp_balance ?? 0, 2) }} USDT</strong></div>
                            </div>
                            <div class="wallet-check">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 24 24" stroke="#fff" stroke-width="3.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                        </label>

                    </div>

                    <div style="margin-top:1.25rem;">
                        <label class="field-label" for="bid-amount">Bid Amount</label>
                        <div class="bid-input-wrap">
                            <span class="bid-input-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </span>
                            <input type="number" id="bid-amount" name="amount" step=".01" class="bid-input" placeholder="0.00" required oninput="updateTotal()">
                        </div>
                        @error('amount')
                        <span style="font-size:0.72rem;color:#ef4444;display:block;margin-top:0.3rem;">{{ $message }}</span>
                        @enderror
                        @if($bidMarginPercent && $bidMinAmount)
                        <div class="bid-min-note">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span>Minimum bid is {{ number_format($bidMarginPercent, 0) }}% of product value (${{ number_format($bidMinAmount, 2) }})</span>
                        </div>
                        @endif
                    </div>

                    <div style="margin-top:1rem;">
                        <label class="field-label" for="bid-qty">Quantity</label>
                        <div class="bid-input-wrap">
                            <span class="bid-input-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 10V7" />
                                </svg>
                            </span>
                            <input type="number" id="bid-qty" name="quantity" class="bid-input" placeholder="1" min="1" required oninput="updateTotal()">
                        </div>
                        @error('quantity')
                        <span style="font-size:0.72rem;color:#ef4444;display:block;margin-top:0.3rem;">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Live total --}}
                    <div class="total-preview hidden-preview" id="totalPreview">
                        <span class="total-label">Estimated Total</span>
                        <span class="total-value" id="totalValue">$0.00</span>
                    </div>

                    <button type="submit" class="place-bid-btn" id="bid-submit-btn"
                        {{ ($nexusActive && !$sessionOpen) ? 'disabled' : '' }}
                        onclick="return validateAndConfirmBid();">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        {{ ($nexusActive && !$sessionOpen) ? 'Session Closed' : 'Place Bid' }}
                    </button>
                </form>
                @endif
            </div>
        </div>

        {{-- ── Bottom: Tabs ── --}}
        <div class="grid grid-cols-1 gap-6 mt-8 md:grid-cols-12">

            <div class="lg:col-span-3 md:col-span-4">
                <div class="tab-card" style="position:sticky;top:5rem;">
                    <p class="sh">Browse</p>
                    <nav class="tab-nav">
                        <button class="tab-nav-btn active" onclick="openTab('bids', this)">
                            <span style="display:inline-flex;align-items:center;gap:0.4rem;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                </svg>
                                Current Bids
                            </span>
                        </button>
                        <button class="tab-nav-btn" onclick="openTab('addinfo', this)">
                            <span style="display:inline-flex;align-items:center;gap:0.4rem;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Additional Info
                            </span>
                        </button>
                    </nav>
                </div>
            </div>

            <div class="lg:col-span-9 md:col-span-8">
                <div class="tab-card">

                    {{-- Bids panel --}}
                    <div id="panel-bids" class="tab-panel active">
                        <p class="sh">Active Bids Table</p>
                        <div style="overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--card-border);">
                            <table class="bids-table">
                                <thead>
                                    <tr>
                                        <th>Bidder</th>
                                        <th>Date</th>
                                        <th>Status</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($bids as $bid)
                                    <tr>
                                        <td>
                                            <span class="font-semibold" style="font-size:0.82rem;">{{ $bid->store_name }}</span>
                                            <br><span style="color:var(--muted);font-size:0.68rem;">{{ $bid->email }}</span>
                                        </td>
                                        <td style="color:var(--muted);">{{ Carbon\Carbon::parse($bid->bid_time)->format('D d-M-Y') }}</td>
                                        <td>
                                            <span class="in-progress-badge">
                                                <span style="width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;"></span>
                                                In Progress
                                            </span>
                                        </td>
                                        <td>
                                            <span class="font-bold">${{ number_format($bid->amount * $bid->quantity, 2) }}</span>
                                            <span style="color:var(--muted);font-size:0.7rem;"> · Qty {{ $bid->quantity }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if(count($bids) < 1)
                            <div style="padding:2rem;text-align:center;color:var(--muted);font-size:0.82rem;">
                            No bids have been placed on this product in the last 24 hours.
                    </div>
                    @endif
                </div>

                {{-- Addinfo panel --}}
                <div id="panel-addinfo" class="tab-panel">
                    <p class="sh">Additional Information</p>
                    <table class="addinfo-table">
                        <tbody>
                            <tr>
                                <td class="info-key">Category</td>
                                <td class="info-val">{{ $product->category }}</td>
                            </tr>
                            <tr>
                                <td class="info-key">Market</td>
                                <td class="info-val">{{ $product->market?->name }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    </div>
</section>

<script>
    // ── Image gallery ──
    function showImg(idx, btn) {
        const showcase = document.getElementById('imgShowcase');
        const w = showcase.querySelector('img').clientWidth;
        showcase.style.transform = `translateX(${-idx * w}px)`;
        document.querySelectorAll('.thumb-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
    }
    window.addEventListener('resize', () => {
        const active = document.querySelector('.thumb-btn.active');
        if (active) showImg(parseInt(active.dataset.id), active);
    });

    // ── Wallet selector ──
    function selectWallet(source) {
        const optMain = document.getElementById('opt-main');
        const optIctp = document.getElementById('opt-ictp');
        optMain.classList.remove('selected-main', 'selected-ictp');
        optIctp.classList.remove('selected-main', 'selected-ictp');
        if (source === 'main') {
            optMain.classList.add('selected-main');
            document.getElementById('ws-main').checked = true;
        } else {
            optIctp.classList.add('selected-ictp');
            document.getElementById('ws-ictp').checked = true;
        }
    }

    // ── Live total ──
    function updateTotal() {
        const amt = parseFloat(document.getElementById('bid-amount').value) || 0;
        const qty = parseInt(document.getElementById('bid-qty').value) || 0;
        const preview = document.getElementById('totalPreview');
        const valEl = document.getElementById('totalValue');
        if (amt > 0 && qty > 0) {
            valEl.textContent = '$' + (amt * qty).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
            preview.classList.remove('hidden-preview');
        } else {
            preview.classList.add('hidden-preview');
        }
    }

    // ── Tab switcher ──
    function openTab(name, btn) {
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        document.querySelectorAll('.tab-nav-btn').forEach(b => b.classList.remove('active'));
        document.getElementById('panel-' + name).classList.add('active');
        btn.classList.add('active');
    }

    @if($nexusActive)
    // ── NEXUS Session Countdown ──
    (function() {
        var countdownEl = document.getElementById('session-countdown');
        var labelEl = document.getElementById('session-label');
        var bannerEl = document.getElementById('nexus-session-banner');
        var bidBtn = document.getElementById('bid-submit-btn');

        @if($sessionOpen && $sessionEndTime)
        // Session is open -- countdown to close
        var endTime = new Date('{{ $sessionEndTime }}');

        function tickOpen() {
            var now = new Date();
            var diff = Math.max(0, Math.floor((endTime - now) / 1000));
            if (diff <= 0) {
                if (countdownEl) countdownEl.textContent = '00:00';
                if (labelEl) labelEl.textContent = 'Session Closed';
                if (bannerEl) {
                    bannerEl.classList.remove('session-open');
                    bannerEl.classList.add('session-closed');
                }
                if (bidBtn) {
                    bidBtn.disabled = true;
                    bidBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> Session Closed';
                }
                return;
            }
            var m = String(Math.floor(diff / 60)).padStart(2, '0');
            var s = String(diff % 60).padStart(2, '0');
            if (countdownEl) countdownEl.textContent = m + ':' + s;
        }
        tickOpen();
        setInterval(tickOpen, 1000);

        @elseif($nextSessionTime)
        // Session is closed -- countdown to next open
        var nextTime = new Date('{{ $nextSessionTime }}');

        function tickClosed() {
            var now = new Date();
            var diff = Math.max(0, Math.floor((nextTime - now) / 1000));
            if (diff <= 0) {
                if (countdownEl) countdownEl.textContent = 'Opening...';
                setTimeout(function() { location.reload(); }, 3000);
                return;
            }
            var h = String(Math.floor(diff / 3600)).padStart(2, '0');
            var m = String(Math.floor((diff % 3600) / 60)).padStart(2, '0');
            var s = String(diff % 60).padStart(2, '0');
            if (countdownEl) countdownEl.textContent = h + ':' + m + ':' + s;
        }
        tickClosed();
        setInterval(tickClosed, 1000);
        @endif
    })();
    @endif

    // Bid minimum validation + confirm
    var bidMinAmount = {{ $bidMinAmount ?? 0 }};
    var bidMinPercent = {{ $bidMarginPercent ?? 0 }};

    function validateAndConfirmBid() {
        var amount = parseFloat(document.getElementById('bid-amount').value) || 0;

        if (bidMinAmount > 0 && amount < bidMinAmount) {
            Swal.fire({
                icon: 'warning',
                title: 'Bid Too Low',
                text: 'Minimum bid is ' + bidMinPercent + '% of product value ($' + bidMinAmount.toFixed(2) + '). Please increase your bid amount.',
                confirmButtonColor: '#f97316'
            });
            return false;
        }

        return confirm('Dear Bidder, you would not be able to cancel this bid after it has been placed. Do you want to proceed?');
    }
</script>
@endsection