@extends('layouts.user')

@section('title')
Sell Off Details
@endsection

@section('content')

<style>
.swal2-styled.swal2-confirm { background-color: #f97316 !important; color: #fff !important; }
.swal2-styled.swal2-cancel { background-color: #6b7280 !important; color: #fff !important; }
.swal2-popup { max-height: 90vh; overflow-y: auto; }

    :root {
        --orange: #f97316;
        --orange-dim: rgba(249, 115, 22, 0.10);
        --orange-glow: rgba(249, 115, 22, 0.25);
        --sky: #0ea5e9;
        --sky-dim: rgba(14, 165, 233, 0.08);
        --sky-border: rgba(14, 165, 233, 0.22);
        --green: #10b981;
        --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.4);
    }

    .sd-hero {
        background: linear-gradient(135deg, #fff7ed 0%, #fdf2ff 100%);
        padding: 5.5rem 0 2.5rem;
    }

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

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

    /* 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: 66px;
        height: 66px;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid var(--card-border);
        cursor: pointer;
        background: none;
        padding: 0;
        transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
    }

    .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;
    }

    /* info card */
    .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.4rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

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

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

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

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

    /* value row */
    .value-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border-radius: var(--radius-sm);
        background: var(--orange-dim);
        border: 1px solid rgba(249, 115, 22, 0.15);
        margin-bottom: 0.75rem;
    }

    .value-row.ictp-row {
        background: var(--sky-dim);
        border-color: var(--sky-border);
    }

    .value-item {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .value-label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
    }

    .value-num {
        font-size: 1rem;
        font-weight: 800;
    }

    /* wallet source badge */
    .ws-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        padding: 0.18rem 0.55rem;
        border-radius: 99px;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        border: 1px solid;
    }

    .ws-badge-main {
        background: rgba(249, 115, 22, 0.1);
        color: var(--orange);
        border-color: rgba(249, 115, 22, 0.3);
    }

    .ws-badge-ictp {
        background: rgba(14, 165, 233, 0.1);
        color: var(--sky);
        border-color: var(--sky-border);
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: 0.4
        }
    }

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

    /* payout destination notice */
    .payout-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding: 0.85rem 1rem;
        border-radius: var(--radius-sm);
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .payout-notice.main-notice {
        background: rgba(249, 115, 22, 0.07);
        border: 1px solid rgba(249, 115, 22, 0.18);
        color: #c2540a;
    }

    .payout-notice.ictp-notice {
        background: var(--sky-dim);
        border: 1px solid var(--sky-border);
        color: #0369a1;
    }

    .dark .payout-notice.main-notice {
        color: #fb923c;
    }

    .dark .payout-notice.ictp-notice {
        color: #38bdf8;
    }

    .payout-icon {
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* form fields */
    .field-label {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .field-hint {
        font-size: 0.7rem;
        color: var(--muted);
        margin: 0.2rem 0 0.4rem;
    }

    .bid-input-wrap {
        position: relative;
        margin-top: 0.4rem;
    }

    .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;
    }

    .field-calc {
        font-size: 0.75rem;
        color: var(--muted);
        margin-top: 0.35rem;
    }

    .field-calc strong {
        color: inherit;
        font-weight: 700;
    }

    /* price range summary */
    .range-summary {
        margin-top: 1.25rem;
        padding: 1rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--card-border);
        background: var(--card-bg);
    }

    .range-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0;
        font-size: 0.78rem;
    }

    .range-summary-row + .range-summary-row {
        border-top: 1px solid var(--card-border);
    }

    .range-summary-row .rkey {
        color: var(--muted);
    }

    .range-summary-row .rval {
        font-weight: 700;
    }

    .range-summary-row.total-row {
        padding-top: 0.65rem;
    }

    .range-summary-row.total-row .rval {
        font-size: 0.95rem;
        color: var(--orange);
    }

    .range-summary-note {
        font-size: 0.72rem;
        color: var(--muted);
        line-height: 1.55;
        margin-top: 0.75rem;
    }

    /* safety net tip */
    .safety-tip {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        margin-top: 1rem;
        padding: 0.75rem 0.85rem;
        border-radius: var(--radius-sm);
        background: rgba(16, 185, 129, 0.06);
        border: 1px solid rgba(16, 185, 129, 0.18);
        font-size: 0.72rem;
        color: #047857;
        line-height: 1.5;
    }

    .dark .safety-tip {
        color: #6ee7b7;
    }

    .safety-tip-icon {
        flex-shrink: 0;
        margin-top: 1px;
    }

    /* sell button */
    .sell-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;
        margin-top: 1.25rem;
        transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
        box-shadow: 0 3px 14px var(--orange-glow);
    }

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

    /* in-sale notice */
    .in-sale-notice {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        padding: 2rem;
        text-align: center;
        border-radius: var(--radius-sm);
        border: 1.5px dashed rgba(249, 115, 22, 0.35);
        background: var(--orange-dim);
        margin-top: 1.25rem;
    }

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

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

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

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

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

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

    .sh {
        font-size: 0.9rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: -0.01em;
        margin-bottom: 0.85rem;
    }

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

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

    .back-link:hover {
        gap: 0.6rem;
        color: var(--orange);
    }
</style>

@php $isIctp = ($ownership->wallet_source ?? 'main') === 'ictp'; @endphp

<!-- Hero -->
<section class="sd-hero">
    <div class="container">
        <div class="mt-14">
            <h3 class="text-2xl font-bold" style="letter-spacing:-0.02em;">
                Sell on {{ ucfirst($market?->name) }}
                <span style="color:var(--muted);font-weight:500;">&middot;</span>
                {{ ucfirst($product?->name) }}
            </h3>
        </div>
        <div class="mt-3" style="display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;">
            <a href="{{ route('sell-markets', $ownership) }}" class="breadcrumb-item" style="color:var(--muted);text-decoration:none;"
                onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--muted)'">Sell Off Market</a>
            <span style="color:var(--muted);">&rsaquo;</span>
            <span class="breadcrumb-item" style="color:var(--orange);">Sell Off Details</span>
        </div>
    </div>
</section>

<div class="container" style="padding-top:1.1rem;">
    <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="14" height="14" 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>

<section style="padding: 1rem 0 4rem;">
    <div class="container">
        <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" onclick="showImg(0,this)">
                        <img src="{{ asset('storage/products/'.$product->image1) }}" alt="">
                    </button>
                    <button class="thumb-btn" onclick="showImg(1,this)">
                        <img src="{{ asset('storage/products/'.$product->image2) }}" alt="">
                    </button>
                    <button class="thumb-btn" 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">
                        <img src="{{ asset('storage/products/'.$product->image2) }}" alt="product">
                        <img src="{{ asset('storage/products/'.$product->image3) }}" alt="product">
                    </div>
                </div>
            </div>

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

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

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

                {{-- Value summary --}}
                <div class="{{ $isIctp ? 'value-row ictp-row' : 'value-row' }}">
                    <div class="value-item">
                        <span class="value-label">Value / Item</span>
                        <span class="value-num">${{ number_format($ownership->value, 2) }}</span>
                    </div>
                    <div class="value-item">
                        <span class="value-label">Quantity</span>
                        <span class="value-num">{{ $ownership->quantity }}</span>
                    </div>
                    <div class="value-item">
                        <span class="value-label">Total Value</span>
                        <span class="value-num">${{ number_format($ownership->value * $ownership->quantity, 2) }}</span>
                    </div>
                    <div class="value-item">
                        <span class="value-label">Source</span>
                        @if($isIctp)
                        <span class="ws-badge ws-badge-ictp"><span class="live-dot"></span> ICTP</span>
                        @else
                        <span class="ws-badge ws-badge-main">Main</span>
                        @endif
                    </div>
                </div>

                {{-- Payout notice --}}
                <div class="payout-notice {{ $isIctp ? 'ictp-notice' : 'main-notice' }}">
                    <span class="payout-icon">
                        @if($isIctp)
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                        @else
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
                        @endif
                    </span>
                    <span>
                        Sale proceeds will be credited to your
                        <strong>{{ $isIctp ? 'ICTP Balance' : 'Main Wallet' }}</strong>
                        - matching the wallet used to purchase this item.
                    </span>
                </div>

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

                @isset($sell)
                {{-- Already in sale --}}
                <div class="in-sale-notice">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="var(--orange)" stroke-width="1.6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="font-bold" style="margin:0;font-size:0.9rem;">Sale In Progress</p>
                    <p style="margin:0;font-size:0.78rem;color:var(--muted);">You are currently running a sale on this product. Please wait for it to complete.</p>
                </div>
                @else
                {{-- Sell form: 3-field NEXUS pricing --}}
                <form action="{{ route('sell-item', [$ownership->id, $market->id]) }}" method="post" id="sellForm">
                    @csrf

                    {{-- Profit Margin --}}
                    <div>
                        <label class="field-label" for="margin_percent">Profit Margin (%)</label>
                        <p class="field-hint">
                            Set your desired profit as a percentage of the product value. Maximum 10%.
                        </p>
                        <div class="bid-input-wrap">
                            <span class="bid-input-icon">%</span>
                            <input type="number" name="margin_percent" id="margin_percent" step="0.1" min="0.1" max="10"
                                class="bid-input" style="padding-left:2rem;" placeholder="e.g. 5" required>
                        </div>
                        @error('margin_percent')
                        <span style="font-size:0.72rem;color:#ef4444;display:block;margin-top:0.3rem;">{{ $message }}</span>
                        @enderror
                        <p class="field-calc">Asking price: <strong id="asking_price_display">$0.00</strong></p>
                    </div>

                    {{-- Recess --}}
                    <div style="margin-top:1rem;">
                        <label class="field-label" for="recess_percent">Recess (%)</label>
                        <p class="field-hint">
                            The lowest you are willing to accept below your asking price. Maximum 10%.
                        </p>
                        <div class="bid-input-wrap">
                            <span class="bid-input-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                                </svg>
                            </span>
                            <input type="number" name="recess_percent" id="recess_percent" step="0.1" min="0" max="10"
                                class="bid-input" placeholder="e.g. 5" required>
                        </div>
                        @error('recess_percent')
                        <span style="font-size:0.72rem;color:#ef4444;display:block;margin-top:0.3rem;">{{ $message }}</span>
                        @enderror
                        <p class="field-calc">Minimum acceptable: <strong id="recess_floor_display">$0.00</strong></p>
                    </div>

                    {{-- Excess --}}
                    <div style="margin-top:1rem;">
                        <label class="field-label" for="excess_percent">Excess (%)</label>
                        <p class="field-hint">
                            The highest you are willing to accept above your asking price. Maximum 10%.
                        </p>
                        <div class="bid-input-wrap">
                            <span class="bid-input-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                                </svg>
                            </span>
                            <input type="number" name="excess_percent" id="excess_percent" step="0.1" min="0" max="10"
                                class="bid-input" placeholder="e.g. 5" required>
                        </div>
                        @error('excess_percent')
                        <span style="font-size:0.72rem;color:#ef4444;display:block;margin-top:0.3rem;">{{ $message }}</span>
                        @enderror
                        <p class="field-calc">Maximum acceptable: <strong id="excess_ceiling_display">$0.00</strong></p>
                    </div>

                    {{-- Price Range Summary --}}
                    <div class="range-summary">
                        <div class="range-summary-row">
                            <span class="rkey">Asking Price</span>
                            <span class="rval" id="summary_asking">$0.00</span>
                        </div>
                        <div class="range-summary-row">
                            <span class="rkey">Acceptable Range</span>
                            <span class="rval"><span id="summary_floor">$0.00</span> &ndash; <span id="summary_ceiling">$0.00</span></span>
                        </div>
                        <div class="range-summary-row total-row">
                            <span class="rkey" style="font-weight:700;color:inherit;">Total ({{ $ownership->quantity }} item(s))</span>
                            <span class="rval"><span id="summary_total_floor">$0.00</span> &ndash; <span id="summary_total_ceiling">$0.00</span></span>
                        </div>
                        <p class="range-summary-note">
                            Your sell order will be evaluated within 24 hours. If the market price falls within your
                            acceptable range, your sell goes through. The final price is determined by live market activity.
                        </p>
                    </div>

                    {{-- Safety net tip --}}
                    <div class="safety-tip">
                        <span class="safety-tip-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">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </span>
                        <span>
                            Products priced within the AI buyback margin (0.05% - 0.2%) are eligible for guaranteed sale regardless of market conditions.
                        </span>
                    </div>

                    <button type="button" class="sell-btn" onclick="confirmSell();">
                        <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="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>
                        Place Sell Order
                    </button>
                </form>
                @endisset
            </div>
        </div>

        {{-- Bottom info --}}
        <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">Market Info</p>
                    <div style="display:flex;flex-direction:column;gap:0.6rem;">
                        <div style="padding:0.75rem;border-radius:var(--radius-sm);background:var(--orange-dim);border:1px solid rgba(249,115,22,0.15);">
                            <div style="font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:0.25rem;">Market</div>
                            <div style="font-size:0.9rem;font-weight:800;">{{ ucfirst($market->name) }}</div>
                        </div>
                        <div style="padding:0.75rem;border-radius:var(--radius-sm);background:var(--card-bg);border:1px solid var(--card-border);">
                            <div style="font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:0.25rem;">Max Recommended Margin</div>
                            <div style="font-size:0.9rem;font-weight:800;color:var(--green);">{{ $market->fake_sell_margin }}%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-9 md:col-span-8">
                <div class="tab-card">
                    <p class="sh">Additional Information</p>
                    <table class="addinfo-table">
                        <tbody>
                            <tr>
                                <td class="addinfo-key">Category</td>
                                <td class="addinfo-val">{{ $product->category }}</td>
                            </tr>
                            <tr>
                                <td class="addinfo-key">Bid Market</td>
                                <td class="addinfo-val">{{ $product->market?->name }}</td>
                            </tr>
                            <tr>
                                <td class="addinfo-key">Sell Payout</td>
                                <td class="addinfo-val">
                                    @if($isIctp)
                                    <span class="ws-badge ws-badge-ictp"><span class="live-dot"></span> ICTP Balance</span>
                                    @else
                                    <span class="ws-badge ws-badge-main">Main Wallet</span>
                                    @endif
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</section>

<script>
    // Live Price Range Calculator
    var initialPrice = {{ $ownership->value }};
    var quantity = {{ $ownership->quantity }};

    function updateCalculations() {
        var margin  = parseFloat(document.getElementById('margin_percent').value) || 0;
        var recess  = parseFloat(document.getElementById('recess_percent').value) || 0;
        var excess  = parseFloat(document.getElementById('excess_percent').value) || 0;

        var askingPrice = initialPrice * (1 + margin / 100);
        var recessFloor = askingPrice - (recess / 100 * askingPrice);
        var excessCeil  = askingPrice + (excess / 100 * askingPrice);

        document.getElementById('asking_price_display').textContent = '$' + askingPrice.toFixed(2);
        document.getElementById('recess_floor_display').textContent = '$' + recessFloor.toFixed(2);
        document.getElementById('excess_ceiling_display').textContent = '$' + excessCeil.toFixed(2);
        document.getElementById('summary_asking').textContent = '$' + askingPrice.toFixed(2);
        document.getElementById('summary_floor').textContent = '$' + recessFloor.toFixed(2);
        document.getElementById('summary_ceiling').textContent = '$' + excessCeil.toFixed(2);
        document.getElementById('summary_total_floor').textContent = '$' + (recessFloor * quantity).toFixed(2);
        document.getElementById('summary_total_ceiling').textContent = '$' + (excessCeil * quantity).toFixed(2);
    }

    ['margin_percent', 'recess_percent', 'excess_percent'].forEach(function(id) {
        document.getElementById(id).addEventListener('input', updateCalculations);
    });

    function confirmSell() {
        var margin = parseFloat(document.getElementById('margin_percent').value) || 0;
        var recess = parseFloat(document.getElementById('recess_percent').value) || 0;
        var excess = parseFloat(document.getElementById('excess_percent').value) || 0;

        if (margin <= 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Profit Margin',
                text: 'Please enter a profit margin before proceeding.',
                confirmButtonColor: '#f97316'
            });
            return;
        }

        var askingPrice = initialPrice * (1 + margin / 100);
        var floor = askingPrice - (recess / 100 * askingPrice);
        var ceiling = askingPrice + (excess / 100 * askingPrice);
        var market = '{{ $market->name }}';
        var wallet = '{{ $isIctp ? "ICTP Balance" : "Main Wallet" }}';

       Swal.fire({
            heightAuto: false,
            title: 'Confirm Sell Order',
            html:
                '<div style="text-align:left;font-size:0.88rem;line-height:1.7;color:#333;">' +
                '<div style="margin-bottom:0.75rem;">' +
                    '<strong>Market:</strong> ' + market +
                '</div>' +
                '<div style="display:flex;flex-direction:column;gap:0.35rem;padding:0.75rem;border-radius:8px;background:#f8f8f6;border:1px solid rgba(0,0,0,0.06);margin-bottom:0.75rem;">' +
                    '<div><span style="color:#666;">Asking price:</span> <strong>$' + askingPrice.toFixed(2) + '</strong> per item <span style="color:#999;">(' + margin + '% margin)</span></div>' +
                    '<div><span style="color:#666;">Acceptable range:</span> <strong>$' + floor.toFixed(2) + '</strong> to <strong>$' + ceiling.toFixed(2) + '</strong></div>' +
                    '<div><span style="color:#666;">Quantity:</span> <strong>' + quantity + ' item(s)</strong></div>' +
                    '<div><span style="color:#666;">Proceeds to:</span> <strong>' + wallet + '</strong></div>' +
                '</div>' +
                '<div style="padding:0.65rem 0.75rem;border-radius:8px;background:#fff7ed;border:1px solid rgba(249,115,22,0.15);font-size:0.8rem;color:#9a3412;line-height:1.5;">' +
                    'You are securing a 24-hour sell slot on this product. Successful sales are not guaranteed as they depend on market activity and your pricing.' +
                '</div>' +
                '</div>',
            icon: null,
            showCancelButton: true,
            confirmButtonText: 'Place Sell Order',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#f97316',
            cancelButtonColor: '#e5e5e5',
            reverseButtons: true,
            customClass: {
                cancelButton: 'swal2-cancel-custom'
            }
        }).then(function(result) {
            if (result.isConfirmed) {
                document.getElementById('sellForm').submit();
            }
        });
    }

    // Gallery
    function showImg(idx, btn) {
        var sc = document.getElementById('imgShowcase');
        var w = sc.querySelector('img').clientWidth;
        sc.style.transform = 'translateX(' + (-idx * w) + 'px)';
        document.querySelectorAll('.thumb-btn').forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
    }
    window.addEventListener('resize', function() {
        var active = document.querySelector('.thumb-btn.active');
        if (active) showImg([].indexOf.call(document.querySelectorAll('.thumb-btn'), active), active);
    });
</script>
@endsection
