@extends('layouts.app')

@section('title', 'Offers')

@section('content')
<div class="offers-page" data-csrf="{{ csrf_token() }}">
    <header class="offers-header">
        <h1>Offers</h1>
        <p class="offers-subtitle">Manage and review offers submitted by customers from your product pages. Configure the "Leave an offer" link that appears below the product price.</p>
    </header>

    <section class="offers-stats-card">
        <div class="offers-stats-row-label">Today</div>
        <div class="offers-stats-grid">
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Orders obtained with offer coupons today">Orders with offers</span>
                <span class="offers-stat-value">{{ $offerStats['orders_with_offers_today'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Pending offers created today">Pending offers</span>
                <span class="offers-stat-value">{{ $offerStats['pending_offers_today'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Offers accepted today">Accepted offers</span>
                <span class="offers-stat-value">{{ $offerStats['accepted_offers_today'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Offers declined today">Declined offers</span>
                <span class="offers-stat-value">{{ $offerStats['declined_offers_today'] ?? 0 }}<span class="offers-stat-value-by-rules" title="Declinadas por reglas del wizard"> ({{ $offerStats['declined_by_rules_today'] ?? 0 }})</span></span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Coupons created by accepting offers today">Coupons created</span>
                <span class="offers-stat-value">{{ $offerStats['coupons_created_today'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Offer coupons deleted from Shopify today">Coupons deleted</span>
                <span class="offers-stat-value">{{ $offerStats['coupons_deleted_today'] ?? 0 }}</span>
            </div>
        </div>
        <div class="offers-stats-row-label">Total</div>
        <div class="offers-stats-grid">
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="All-time orders obtained with offer coupons">Orders with offers</span>
                <span class="offers-stat-value">{{ $offerStats['total_orders_with_offers'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="All-time pending offers">Pending offers</span>
                <span class="offers-stat-value">{{ $offerStats['total_pending_offers'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="All-time accepted offers">Accepted offers</span>
                <span class="offers-stat-value">{{ $offerStats['total_accepted_offers'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="All-time declined offers">Declined offers</span>
                <span class="offers-stat-value">{{ $offerStats['total_declined_offers'] ?? 0 }}<span class="offers-stat-value-by-rules" title="Declinadas por reglas del wizard"> ({{ $offerStats['total_declined_by_rules'] ?? 0 }})</span></span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="All-time coupons created from the Offers menu">Coupons created</span>
                <span class="offers-stat-value">{{ $offerStats['total_coupons_created'] ?? 0 }}</span>
            </div>
            <div class="offers-stat-item">
                <span class="offers-stat-label" title="Cumulative offer coupons deleted from Shopify">Coupons deleted</span>
                <span class="offers-stat-value">{{ $offerStats['total_coupons_deleted'] ?? 0 }}</span>
            </div>
        </div>
        <p class="offers-stats-note"><strong>Orders with offers today</strong>: orders obtained using discount codes created from accepted offers (completed today). <strong>Pending / Accepted / Declined today</strong>: offers in that status whose creation or status change happened today. <strong>Coupons created today</strong>: number of offers accepted today (one coupon per acceptance). <strong>Coupons deleted today</strong>: offer coupons removed from Shopify today; resets at midnight. <strong>Total coupons created</strong>: all-time count of coupons created from the Offers menu (accepted or completed offers). <strong>Total coupons deleted</strong>: cumulative count of offer coupons deleted from Shopify. The number in red <strong>(X)</strong> next to Declined offers is how many were declined by the wizard rules (before reaching the admin).</p>
        <p class="offers-stats-note"><a href="{{ route('offers.index') }}">Refresh now</a> to see the latest stats and offer list. Configure Offer settings (fees, validity) in <a href="{{ route('setting.offer') }}">Setting →</a></p>
    </section>

    <section class="offers-section offers-card offers-client-offers-section" id="client-offers">
        <h2 class="offers-section-title">Client offers</h2>
        <p class="offers-section-desc">Offers submitted by customers will appear here. Showing 10 per page.</p>
        @if(session('message'))
            <div class="offers-alert offers-alert--success" role="alert">{{ session('message') }}</div>
        @endif
        @if(session('error'))
            <div class="offers-alert offers-alert--error" role="alert">{{ session('error') }}</div>
        @endif
        @php
            $qp = request()->query();
            $offersBaseParams = function($overrides = []) use ($qp) {
                $merged = array_merge([
                    'status' => $qp['status'] ?? '',
                    'range' => $qp['range'] ?? 'all',
                    'from' => $qp['from'] ?? null,
                    'to' => $qp['to'] ?? null,
                ], $overrides);
                return array_filter($merged, function ($v) { return $v !== null && $v !== ''; });
            };
            $offersDateLink = function($range) use ($offersBaseParams) { return route('offers.index', $offersBaseParams(['range' => $range])); };
        @endphp
        <div class="offers-filters-form">
            <div class="offers-filter-group">
                <span class="offers-filter-label">Date</span>
                <div class="offers-date-filter">
                    <button type="button" class="offers-date-filter-btn" id="offersDateFilterBtn" aria-haspopup="true" aria-expanded="false">
                        <span class="offers-date-filter-label">{{ $dateRangeLabel ?? 'All' }}</span>
                        <span class="offers-date-filter-arrow">▾</span>
                    </button>
                    <div id="offersDateFilterDropdown" class="offers-date-filter-dropdown" hidden>
                        <div class="offers-date-filter-presets">
                            <a href="{{ $offersDateLink('all') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? 'all') === 'all' ? 'is-active' : '' }}">All</a>
                            <a href="{{ $offersDateLink('today') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? '') === 'today' ? 'is-active' : '' }}">Today</a>
                            <a href="{{ $offersDateLink('yesterday') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? '') === 'yesterday' ? 'is-active' : '' }}">Yesterday</a>
                            <a href="{{ $offersDateLink('last_30_minutes') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? '') === 'last_30_minutes' ? 'is-active' : '' }}">Last 30 minutes</a>
                            <a href="{{ $offersDateLink('last_12_hours') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? '') === 'last_12_hours' ? 'is-active' : '' }}">Last 12 hours</a>
                            <a href="{{ $offersDateLink('last_7_days') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? '') === 'last_7_days' ? 'is-active' : '' }}">Last 7 days</a>
                            <a href="{{ $offersDateLink('last_30_days') }}#client-offers" class="offers-date-preset {{ ($dateRange ?? '') === 'last_30_days' ? 'is-active' : '' }}">Last 30 days</a>
                        </div>
                        <div class="offers-date-filter-custom">
                            <div class="offers-date-custom-title">Custom date range</div>
                            <form method="get" action="{{ route('offers.index') }}#client-offers" class="offers-date-custom-form">
                                <input type="hidden" name="range" value="custom">
                                @if(($statusFilter ?? '') !== '')
                                    <input type="hidden" name="status" value="{{ $statusFilter }}">
                                @endif
                                <label class="offers-date-custom-label">
                                    <span>From</span>
                                    <input type="date" name="from" value="{{ $dateFrom ?? '' }}" class="offers-date-input">
                                </label>
                                <label class="offers-date-custom-label">
                                    <span>To</span>
                                    <input type="date" name="to" value="{{ $dateTo ?? '' }}" class="offers-date-input">
                                </label>
                                <button type="submit" class="offers-date-apply-btn">Apply</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offers-filter-group">
                <label for="offers-filter-status" class="offers-filter-label">Status</label>
                <select name="status" id="offers-filter-status" class="offers-filter-select">
                    <option value="">All</option>
                    @foreach(\App\Models\ClientOffer::statusLabels() as $value => $label)
                        <option value="{{ $value }}" {{ ($statusFilter ?? '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="offers-table-wrap">
            @if(isset($clientOffers) && $clientOffers->count() > 0)
                <table class="offers-table">
                    <thead>
                        <tr>
                            <th class="offers-table-datetime-cell">Date & time</th>
                            <th class="offers-table-product-cell">Product</th>
                            <th>Cost</th>
                            <th>Sale</th>
                            <th>Offer</th>
                            <th>Profit</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($clientOffers as $offer)
                            @php
                                $createdMiami = $offer->created_at->timezone('America/New_York');
                                $dateStr = $createdMiami->format('m/d/Y');
                                $timeStr = $createdMiami->format('g:i A');
                                $dateTimeStr = $dateStr . ' ' . $timeStr;
                                $statusLabels = \App\Models\ClientOffer::statusLabels();
                                $statusLabel = $statusLabels[$offer->status] ?? $offer->status;
                                $profit = $offer->profit;
                                $discountAmount = ($offer->sale_price !== null && $offer->offer_amount !== null) ? ((float)$offer->sale_price - (float)$offer->offer_amount) : null;
                                $gatewayFeePct = \App\Models\OfferSetting::getGatewayFeePercent();
                                $shippingFeeAmount = \App\Models\OfferSetting::getShippingFeeAmount();
                                $gatewayFeeAmount = (float)$offer->offer_amount * ($gatewayFeePct / 100);
                                $profitAfterFees = \App\Models\BusinessFeeSetting::estimateNetProfit((float) $offer->offer_amount, $offer->cost !== null ? (float) $offer->cost : null);
                                $isAccepted = $offer->status === \App\Models\ClientOffer::STATUS_ACCEPTED;
                                $isCompleted = $offer->status === \App\Models\ClientOffer::STATUS_COMPLETED;
                                $isPending = $offer->status === \App\Models\ClientOffer::STATUS_PENDING;
                                $isDeclinedByRules = $offer->status === \App\Models\ClientOffer::STATUS_DECLINED_BY_RULES;
                                $salePriceFloat = $offer->sale_price !== null ? (float) $offer->sale_price : null;
                                $offerAmountFloat = (float) $offer->offer_amount;
                                $offerNotAboveRetail = true;
                                if ($salePriceFloat !== null && $salePriceFloat > 0) {
                                    $offerNotAboveRetail = round($offerAmountFloat, 2) <= round($salePriceFloat, 2);
                                }
                                $declinedByRulesViewable = $isDeclinedByRules
                                    && $profit !== null
                                    && $profit > 0
                                    && $offerNotAboveRetail;
                                $hasCoupon = $isAccepted || $isCompleted;
                                $isAwaitingCustomer = $offer->status === \App\Models\ClientOffer::STATUS_AWAITING_CUSTOMER;
                                $isCounterDeclined = $offer->status === \App\Models\ClientOffer::STATUS_COUNTER_DECLINED;

                                $originalCustomerOfferBeforeCounter = null;
                                if ($offer->rules_decline_customer_offer_amount !== null && $offer->rules_decline_customer_offer_amount !== '') {
                                    $originalCustomerOfferBeforeCounter = (float) $offer->rules_decline_customer_offer_amount;
                                } elseif ($offer->declinedSourceOffer) {
                                    $originalCustomerOfferBeforeCounter = (float) $offer->declinedSourceOffer->offer_amount;
                                }

                                $declineRuleFailureHints = [];
                                if ($isDeclinedByRules) {
                                    $saleForRules = $offer->sale_price !== null ? (float) $offer->sale_price : 0.0;
                                    $costForRules = $offer->cost !== null ? (float) $offer->cost : null;
                                    $svc = app(\App\Services\OfferDeclineRuleService::class);
                                    $ev = $svc->evaluate((float) $offer->offer_amount, $costForRules, $saleForRules);
                                    if (! $ev['pass']) {
                                        foreach ($ev['failed_rules'] as $rid => $_l) {
                                            $r = \App\Models\OfferDeclineRule::find((int) $rid);
                                            if (! $r) {
                                                continue;
                                            }
                                            $h = $svc->acceptableOfferRangeHint($r, $costForRules, $saleForRules);
                                            if ($h !== '') {
                                                $declineRuleFailureHints[] = $h;
                                            }
                                        }
                                    }
                                }

                                $detailBase = [
                                    'date_time' => $dateTimeStr,
                                    'created_at' => $offer->created_at->timezone('America/New_York')->format('m/d/Y g:i A'),
                                    'product_title' => $offer->product_title ?? '',
                                    'product_image_url' => $offer->product_image_url ?? '',
                                    'cost' => $offer->cost !== null ? (float) $offer->cost : null,
                                    'offer_amount' => (float) $offer->offer_amount,
                                    'sale_price' => $offer->sale_price !== null ? (float) $offer->sale_price : null,
                                    'profit' => $profit,
                                    'gateway_fee_percent' => $gatewayFeePct,
                                    'shipping_fee_amount' => $shippingFeeAmount,
                                    'gateway_fee_amount' => $gatewayFeeAmount,
                                    'profit_after_fees' => $profitAfterFees,
                                    'discount_amount' => $discountAmount,
                                    'customer_name' => $offer->customer_name ?? '',
                                    'customer_email' => $offer->customer_email ?? '',
                                    'customer_phone' => $offer->customer_phone ?? '',
                                    'question' => $offer->question ?? '',
                                    'decline_rule_failure_labels' => \Illuminate\Support\Facades\Schema::hasColumn('client_offers', 'decline_rule_failure_labels')
                                        ? (array) ($offer->decline_rule_failure_labels ?? [])
                                        : [],
                                    'decline_rule_failure_hints' => $declineRuleFailureHints,
                                    'original_customer_offer_before_counter' => $originalCustomerOfferBeforeCounter,
                                ];

                                $offerDetails = null;
                                if ($isAccepted || $isPending || $isCompleted) {
                                    $offerDetails = array_merge($detailBase, [
                                        'is_pending' => $isPending,
                                        'is_completed' => $isCompleted,
                                        'is_declined_by_rules' => false,
                                        'is_awaiting_customer' => false,
                                        'is_counter_declined' => false,
                                        'accept_url' => $isPending ? route('offers.accept-dashboard', $offer) : '',
                                        'decline_url' => $isPending ? route('offers.decline-dashboard', $offer) : '',
                                        'discount_code' => $hasCoupon ? ($offer->discount_code ?? '') : '',
                                        'discount_id' => $hasCoupon ? ($offer->discount_id ?? '') : '',
                                        'expires_at' => $hasCoupon && $offer->expires_at ? $offer->expires_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_email_sent_at' => $hasCoupon && $offer->offer_accepted_email_sent_at ? $offer->offer_accepted_email_sent_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_sms_sent_at' => $hasCoupon && $offer->offer_accepted_sms_sent_at ? $offer->offer_accepted_sms_sent_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_email_opened_at' => $hasCoupon && $offer->offer_accepted_email_opened_at ? $offer->offer_accepted_email_opened_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_sms_status' => $hasCoupon ? ($offer->offer_accepted_sms_status ?? '') : '',
                                        'offer_accepted_sms_fail_reason' => $hasCoupon ? ($offer->offer_accepted_sms_fail_reason ?? '') : '',
                                    ]);
                                } elseif ($isAwaitingCustomer || $isCounterDeclined) {
                                    $offerDetails = array_merge($detailBase, [
                                        'is_pending' => false,
                                        'is_completed' => false,
                                        'is_declined_by_rules' => false,
                                        'is_awaiting_customer' => $isAwaitingCustomer,
                                        'is_counter_declined' => $isCounterDeclined,
                                        'accept_url' => '',
                                        'decline_url' => '',
                                        'discount_code' => '',
                                        'discount_id' => '',
                                        'expires_at' => '',
                                        'offer_accepted_email_sent_at' => $offer->offer_accepted_email_sent_at ? $offer->offer_accepted_email_sent_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_sms_sent_at' => $offer->offer_accepted_sms_sent_at ? $offer->offer_accepted_sms_sent_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_email_opened_at' => $offer->offer_accepted_email_opened_at ? $offer->offer_accepted_email_opened_at->timezone('America/New_York')->format('m/d/Y g:i A') : '',
                                        'offer_accepted_sms_status' => (string) ($offer->offer_accepted_sms_status ?? ''),
                                        'offer_accepted_sms_fail_reason' => (string) ($offer->offer_accepted_sms_fail_reason ?? ''),
                                    ]);
                                } elseif ($declinedByRulesViewable) {
                                    $custEmail = trim((string) ($offer->customer_email ?? ''));
                                    $customerEmailOk = $custEmail !== '' && $custEmail !== '—' && filter_var($custEmail, FILTER_VALIDATE_EMAIL);
                                    $variantOkForPropose = trim((string) ($offer->variant_id ?? '')) !== '';
                                    $offerDetails = array_merge($detailBase, [
                                        'is_pending' => false,
                                        'is_completed' => false,
                                        'is_declined_by_rules' => true,
                                        'is_awaiting_customer' => false,
                                        'is_counter_declined' => false,
                                        'accept_url' => '',
                                        'decline_url' => '',
                                        'discount_code' => '',
                                        'discount_id' => '',
                                        'expires_at' => '',
                                        'offer_accepted_email_sent_at' => '',
                                        'offer_accepted_sms_sent_at' => '',
                                        'offer_accepted_email_opened_at' => '',
                                        'offer_accepted_sms_status' => '',
                                        'offer_accepted_sms_fail_reason' => '',
                                        'can_propose_counter_offer' => $customerEmailOk && $variantOkForPropose,
                                        'propose_counter_offer_url' => route('offers.counter-from-declined', $offer),
                                    ]);
                                }
                            @endphp
                            <tr>
                                <td data-cell="Date & time" class="offers-table-datetime-cell">
                                    <span class="offers-table-date">{{ $dateStr }}</span>
                                    <span class="offers-table-time">{{ $timeStr }}</span>
                                </td>
                                <td data-cell="Product" class="offers-table-product-cell">
                                    <div class="offers-table-product-wrap">
                                        @if($offer->product_image_url)
                                            <img src="{{ $offer->product_image_url }}" alt="" class="offers-table-img" width="48" height="48" loading="lazy">
                                        @else
                                            <span class="offers-table-img-placeholder">—</span>
                                        @endif
                                        <span class="offers-table-product-title">{{ $offer->product_title }}</span>
                                    </div>
                                </td>
                                <td data-cell="Cost">{{ $offer->cost !== null ? '$' . number_format((float)$offer->cost, 2) : '—' }}</td>
                                <td data-cell="Sale">{{ $offer->sale_price !== null ? '$' . number_format((float)$offer->sale_price, 2) : '—' }}</td>
                                <td data-cell="Offer">${{ number_format((float)$offer->offer_amount, 2) }}</td>
                                <td data-cell="Profit">{{ $profit !== null ? '$' . number_format($profit, 2) : '—' }}</td>
                                <td data-cell="Status"><span class="offers-status offers-status-{{ $offer->status }}">{{ $statusLabel }}</span></td>
                                <td data-cell="Actions" class="offers-table-actions-cell">
                                    @if($offer->status === \App\Models\ClientOffer::STATUS_PENDING)
                                        <button type="button" class="offers-btn offers-btn--details offers-btn-view-details" data-offer-details="{{ $offerDetails ? base64_encode(json_encode($offerDetails)) : '' }}">View details</button>
                                    @elseif($offer->status === \App\Models\ClientOffer::STATUS_ACCEPTED)
                                        <div class="offers-table-actions">
                                            <button type="button" class="offers-btn offers-btn--details offers-btn-view-details" data-offer-details="{{ $offerDetails ? base64_encode(json_encode($offerDetails)) : '' }}">View details</button>
                                            @if($offer->wasAcceptanceNotificationSentToday())
                                                <span class="offers-notified-caption" title="Email or SMS was sent today">Notified</span>
                                            @else
                                                <form method="post" action="{{ route('offers.resend-accepted-notifications', $offer) }}" class="offers-action-form" style="display:inline;" onsubmit="return confirm('Resend the same acceptance email and SMS to this customer?');">
                                                    @csrf
                                                    <button type="submit" class="offers-btn offers-btn--notify">Notification</button>
                                                </form>
                                            @endif
                                        </div>
                                    @elseif($offer->status === \App\Models\ClientOffer::STATUS_COMPLETED)
                                        <span class="offers-table-actions-empty" title="Customer placed an order with this offer coupon">Order placed</span>
                                    @elseif($offer->status === \App\Models\ClientOffer::STATUS_AWAITING_CUSTOMER)
                                        <div class="offers-table-actions">
                                            <button type="button" class="offers-btn offers-btn--details offers-btn-view-details" data-offer-details="{{ $offerDetails ? base64_encode(json_encode($offerDetails)) : '' }}">View details</button>
                                            @if($offer->wasAcceptanceNotificationSentToday())
                                                <span class="offers-notified-caption" title="Counter-proposal email or SMS was sent today">Notified</span>
                                            @else
                                                <form method="post" action="{{ route('offers.resend-counter-proposal-notifications', $offer) }}" class="offers-action-form" style="display:inline;" onsubmit="return confirm('Resend the counter-proposal email and SMS (if allowed) with fresh links to this customer?');">
                                                    @csrf
                                                    <button type="submit" class="offers-btn offers-btn--notify">Notification</button>
                                                </form>
                                            @endif
                                        </div>
                                    @elseif($offer->status === \App\Models\ClientOffer::STATUS_COUNTER_DECLINED)
                                        <button type="button" class="offers-btn offers-btn--details offers-btn-view-details" data-offer-details="{{ $offerDetails ? base64_encode(json_encode($offerDetails)) : '' }}">View details</button>
                                    @elseif($declinedByRulesViewable)
                                        <button type="button" class="offers-btn offers-btn--details offers-btn-view-details" data-offer-details="{{ $offerDetails ? base64_encode(json_encode($offerDetails)) : '' }}">View details</button>
                                    @else
                                        <span class="offers-table-actions-empty">—</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="offers-pagination-wrap">
                    {{ $clientOffers->appends(request()->query())->links('vendor.pagination.offers') }}
                </div>
            @else
                <div class="offers-placeholder">
                    <p>No offers yet. When customers use the "Leave an offer" link on product pages, their offers will appear here.@if(isset($statusFilter) && $statusFilter !== '') Try changing the status filter above.@endif</p>
                </div>
            @endif
        </div>
    </section>

    <section class="offers-section offers-card">
        <h2 class="offers-section-title">Offer link on product page</h2>
        <p class="offers-section-desc">The link appears below the Add to Cart and Buy Now buttons (full-width, same style) only when "Enable the offer link" is checked and only on products or collections you add here. Choose one mode: search by <strong>Products</strong> or by <strong>Collections</strong> (never both at once). Only added products, or products in added collections, will show the link.</p>

        <form action="{{ route('offers.link-settings') }}" method="POST" class="offers-form" id="offers-form">
            @csrf
            <div class="offers-form-row">
                <label class="offers-label" for="link_text">Link text</label>
                <input type="text" name="link_text" id="link_text" class="offers-input" value="{{ old('link_text', $offerLinkSetting->link_text ?? 'Make an offer') }}" maxlength="120" required>
                <span class="offers-hint">Label on the <strong>product page</strong> below Add to Cart / Buy Now (e.g. &quot;Make a private offer&quot;).</span>
            </div>

            <div class="offers-form-row">
                <label class="offers-label" for="collection_link_text">Collection grid button text</label>
                <input type="text" name="collection_link_text" id="collection_link_text" class="offers-input" value="{{ old('collection_link_text', $offerLinkSetting->collection_link_text ?? 'MAKE AN OFFER') }}" maxlength="120" required>
                <span class="offers-hint">Caption on collection <strong>product cards</strong> only (keep it short). Examples: &quot;MAKE AN OFFER&quot;, &quot;NAME YOUR PRICE&quot;, &quot;OFFER IN ONE TAP&quot;. Saved to theme snippet <code>app-offer-collection-label</code> when you click Save settings.</span>
            </div>

            <div class="offers-form-row">
                <label class="offers-label">Show link</label>
                <label class="offers-checkbox-label">
                    <input type="checkbox" name="enabled" value="1" {{ old('enabled', $offerLinkSetting->enabled ?? false) ? 'checked' : '' }}>
                    Enable the offer link
                </label>
                <span class="offers-hint">The offer button below the cart buttons is shown only when this is checked and only on products/collections added below.</span>
            </div>

            <div class="offers-form-row">
                <label class="offers-label">Deal of the Day</label>
                <input type="hidden" name="exclude_deal_of_the_day_tagged_products" value="0">
                <label class="offers-checkbox-label">
                    <input type="checkbox" name="exclude_deal_of_the_day_tagged_products" value="1" @checked(old('exclude_deal_of_the_day_tagged_products', $offerLinkSetting->exclude_deal_of_the_day_tagged_products ?? true))>
                    Exclude products included in Deal of the Day
                </label>
                <span class="offers-hint">When checked (default), Make an offer is hidden on the product page and collection cards for products tagged <code>deal of the day</code> (same tag used for Deal of the Day). The app stops syncing the <code>offer-link-allowed</code> tag to those products. Uncheck to allow offers on deal products. After changing, click <strong>Save settings</strong> and then <strong>Update Offer Link</strong> if the theme snippet is installed to resync tags.</span>
            </div>

            {{-- Mode: Products OR Collections (only one at a time) --}}
            <div class="offers-form-row">
                <label class="offers-label">Search by</label>
                <div class="offers-mode-row">
                    <label class="offers-radio-label">
                        <input type="radio" name="search_mode" value="products" id="mode-products" checked>
                        Products
                    </label>
                    <label class="offers-radio-label">
                        <input type="radio" name="search_mode" value="collections" id="mode-collections">
                        Collections
                    </label>
                </div>
                <p class="offers-hint">You can only search by one at a time: either products or collections.</p>
            </div>

            {{-- By product: visible only when mode = products --}}
            <div class="offers-form-row offers-panel" id="panel-products">
                <label class="offers-label">By product</label>
                <p class="offers-hint" style="margin-bottom: 0.5rem;">Search by product title. Add products with the button next to the title. Only these products will show the link.</p>
                <div class="offers-search-row">
                    <input type="text" id="product-search" class="offers-input" placeholder="Search by product title..." style="max-width: 280px;">
                    <button type="button" id="product-search-btn" class="btn btn-secondary">Search</button>
                </div>
                <div id="product-search-results" class="offers-search-results"></div>
                <div class="offers-added-list" id="added-products">
                    <span class="offers-added-title">Added products:</span>
                    <ul class="offers-added-ul" id="added-products-list">
                        @foreach($addedProducts ?? [] as $product)
                            <li class="offers-added-li">
                                <input type="hidden" name="product_ids[]" value="{{ $product['id'] }}">
                                @if(!empty($product['image']))
                                    <img src="{{ $product['image'] }}" alt="" class="offers-product-thumb" width="40" height="40" loading="lazy">
                                @else
                                    <span class="offers-product-thumb offers-product-thumb-placeholder"></span>
                                @endif
                                <span class="offers-product-title">{{ $product['title'] }}</span>
                                <button type="button" class="offers-remove-btn" data-id="{{ $product['id'] }}" data-type="product">Remove</button>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            {{-- By collection: visible only when mode = collections --}}
            <div class="offers-form-row offers-panel" id="panel-collections" style="display: none;">
                <label class="offers-label">By collection</label>
                <p class="offers-hint" style="margin-bottom: 0.5rem;">Search by collection name. Add collections with the button next to the name. Only products in these collections will show the link.</p>
                <div class="offers-search-row">
                    <input type="text" id="collection-search" class="offers-input" placeholder="Search by collection name..." style="max-width: 280px;">
                    <button type="button" id="collection-search-btn" class="btn btn-secondary">Search</button>
                </div>
                <div id="collection-search-results" class="offers-search-results"></div>
                <div class="offers-added-list" id="added-collections">
                    <span class="offers-added-title">Added collections:</span>
                    <ul class="offers-added-ul" id="added-collections-list">
                        @foreach($addedCollections ?? [] as $col)
                            <li class="offers-added-li">
                                <input type="hidden" name="collection_ids[]" value="{{ $col['id'] }}">
                                <span class="offers-table-product-title">{{ $col['title'] }}</span>
                                <button type="button" class="offers-remove-btn" data-id="{{ $col['id'] }}" data-type="collection">Remove</button>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <p class="offers-hint" style="margin-top: 1rem; margin-bottom: 0.5rem;">Exclude collections: products that belong to any excluded collection will <strong>not</strong> show the offer link (even if they are in an added collection).</p>
                <div class="offers-search-row">
                    <input type="text" id="excluded-collection-search" class="offers-input" placeholder="Search by collection name to exclude..." style="max-width: 280px;">
                    <button type="button" id="excluded-collection-search-btn" class="btn btn-secondary">Search</button>
                </div>
                <div id="excluded-collection-search-results" class="offers-search-results"></div>
                <div class="offers-added-list" id="excluded-collections">
                    <span class="offers-added-title">Excluded collections:</span>
                    <ul class="offers-added-ul" id="excluded-collections-list">
                        @foreach($excludedCollections ?? [] as $col)
                            <li class="offers-added-li">
                                <input type="hidden" name="excluded_collection_ids[]" value="{{ $col['id'] }}">
                                <span class="offers-table-product-title">{{ $col['title'] }}</span>
                                <button type="button" class="offers-remove-btn" data-id="{{ $col['id'] }}" data-type="excluded-collection">Remove</button>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="offers-form-actions">
                <button type="submit" class="btn btn-primary" id="offers-save-settings-btn">Save settings</button>
            </div>
        </form>

        <div class="offers-theme-actions">
            <h3 class="offers-theme-title">Theme installation</h3>
            <p class="offers-theme-desc">Inject the offer button into the product template so it appears below Add to Cart and Buy Now (full-width, same style). Uses theme {{ config('services.shopify.deals_theme_name', 'non-live theme') }}. If the button appears in the wrong place, set OFFER_LINK_INJECTION_AFTER in .env to an exact string from your theme that appears right after the buy buttons.</p>
            <div class="offers-theme-buttons">
                @if($hasOfferLinkOnTheme)
                    <form action="{{ route('offers.update-link') }}" method="POST" style="display:inline;" id="offers-update-link-form">
                        @csrf
                        <button type="submit" class="btn btn-primary" id="offers-update-link-btn">Update Offer Link</button>
                    </form>
                    <form action="{{ route('offers.remove-from-theme') }}" method="POST" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn btn-secondary">Remove Offer Link</button>
                    </form>
                @else
                    <form action="{{ route('offers.add-to-theme') }}" method="POST" style="display:inline;" id="offers-add-link-form">
                        @csrf
                        <button type="submit" class="btn btn-primary" id="offers-add-link-btn">Add Offer Link</button>
                    </form>
                @endif
            </div>
        </div>

        <div class="offers-decline-rules">
            <h3 class="offers-theme-title">Offer decline rules</h3>
            <p class="offers-theme-desc">All rules must pass for an offer to be accepted. If any fails, the offer is declined. You can add tiers by range (From $ to $) with a required margin % or fixed profit.</p>
            <ul class="offers-rules-list" id="decline-rules-list">
                @foreach($declineRules ?? [] as $rule)
                    <li class="offers-rules-li">
                        <span class="offers-rule-label">{{ $rule->label }}</span>
                        <button type="button" class="btn btn-sm btn-outline-secondary offers-rule-edit-btn" data-toggle="edit-{{ $rule->id }}">Edit</button>
                        <form action="{{ route('offers.decline-rules.destroy', $rule->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Remove this rule?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
                        </form>
                        <div class="offers-rule-edit-wrap" id="edit-{{ $rule->id }}" style="display:none; margin-top:0.75rem; padding:0.75rem; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px;">
                            <form action="{{ route('offers.decline-rules.update', $rule->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="offers-form-row">
                                    <label class="offers-label">Decline message</label>
                                    <textarea name="decline_message" class="offers-input" rows="3" placeholder="{{ \App\Models\OfferDeclineRule::DEFAULT_DECLINE_MESSAGE }}" style="width:100%; max-width:480px;">{{ old('decline_message', $rule->getRawOriginal('decline_message') ?? '') }}</textarea>
                                    <span class="offers-hint-inline">Shown when this rule declines the offer. Leave empty for default.</span>
                                </div>
                                @if($rule->type === 'tier')
                                    <div class="offers-tier-row">
                                        <div class="offers-form-row offers-inline">
                                            <label class="offers-label">From $</label>
                                            <input type="number" name="range_from" step="0.01" min="0" class="offers-input" value="{{ old('range_from', $rule->range_from ?? 0) }}" style="max-width:100px;">
                                        </div>
                                        <div class="offers-form-row offers-inline">
                                            <label class="offers-label">to $</label>
                                            <input type="number" name="range_to" step="0.01" min="0" class="offers-input" value="{{ old('range_to', $rule->range_to ?? '') }}" placeholder="empty = no limit" style="max-width:120px;">
                                        </div>
                                    </div>
                                    <div class="offers-tier-row">
                                        <div class="offers-form-row offers-inline">
                                            <label class="offers-label">Value type</label>
                                            <select name="value_type" class="offers-input" style="max-width:120px;">
                                                <option value="percent" {{ ($rule->value_type ?? 'percent') === 'percent' ? 'selected' : '' }}>% (margin)</option>
                                                <option value="fixed" {{ ($rule->value_type ?? '') === 'fixed' ? 'selected' : '' }}>Fixed $ (profit)</option>
                                            </select>
                                        </div>
                                        <div class="offers-form-row offers-inline">
                                            <label class="offers-label">Min from</label>
                                            <input type="number" name="value_min_from" step="0.01" min="0" class="offers-input" value="{{ old('value_min_from', $rule->value_min_from ?? '') }}" placeholder="e.g. 80" style="max-width:100px;" title="Start of acceptable range">
                                        </div>
                                        <div class="offers-form-row offers-inline">
                                            <label class="offers-label">Min to</label>
                                            <input type="number" name="value" step="0.01" min="0" class="offers-input" value="{{ old('value', $rule->value ?? 0) }}" style="max-width:100px;" title="End of range">
                                        </div>
                                        <div class="offers-form-row offers-inline">
                                            <label class="offers-label">Max</label>
                                            <span class="offers-max-display">{{ ($rule->value_type ?? 'percent') === 'percent' ? '100%' : 'Max' }}</span>
                                        </div>
                                    </div>
                                @endif
                                <div class="offers-form-actions" style="margin-top:0.5rem;">
                                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                    <button type="button" class="btn btn-secondary btn-sm offers-rule-edit-cancel" data-toggle="edit-{{ $rule->id }}">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </li>
                @endforeach
            </ul>
            @if(($declineRules ?? collect())->isEmpty())
                <p class="offers-hint">No rules yet. Run <code>php artisan migrate</code> to create the table and default rules (offer &gt; cost, offer &lt; price).</p>
            @endif
            <form action="{{ route('offers.decline-rules.store') }}" method="POST" class="offers-rule-form" id="add-decline-rule-form">
                @csrf
                <div class="offers-form-row">
                    <label class="offers-label">Add rule</label>
                    <select name="type" id="rule-type" class="offers-input" style="max-width: 100%;">
                        <option value="offer_gt_cost">Offer must be greater than product cost</option>
                        <option value="offer_lt_price">Offer must be less than sale price</option>
                        <option value="tier">Tier (custom range: From $ to $, then % or Fixed $)</option>
                    </select>
                </div>
                <div id="rule-params-tier" class="offers-rule-params offers-tier-params" style="display: none;">
                    <p class="offers-hint" style="margin-bottom: 0.75rem;">Define a range by cost. When the product cost falls in this range, the offer must meet the margin % or profit.</p>
                    <div class="offers-tier-row">
                        <div class="offers-form-row offers-inline">
                            <label class="offers-label">From $</label>
                            <input type="number" name="range_from" id="tier-range-from" step="0.01" min="0" class="offers-input" placeholder="0" style="max-width: 100px;">
                        </div>
                        <div class="offers-form-row offers-inline">
                            <label class="offers-label">to $</label>
                            <input type="number" name="range_to" id="tier-range-to" step="0.01" min="0" class="offers-input" placeholder="empty = no limit" style="max-width: 120px;" title="Leave empty for no upper limit">
                        </div>
                        <span class="offers-hint-inline">(empty = no limit)</span>
                    </div>
                    <div class="offers-tier-row">
                        <div class="offers-form-row offers-inline">
                            <label class="offers-label">Value type</label>
                            <select name="value_type" id="tier-value-type" class="offers-input" style="max-width: 120px;">
                                <option value="percent">% (margin)</option>
                                <option value="fixed">Fixed $ (profit)</option>
                            </select>
                        </div>
                        <div class="offers-form-row offers-inline">
                            <label class="offers-label" id="tier-value-from-label">Min from</label>
                            <input type="number" name="value_min_from" id="tier-value-min-from" step="0.01" min="0" class="offers-input" placeholder="e.g. 80" style="max-width: 100px;" title="Start of range (display)">
                        </div>
                        <div class="offers-form-row offers-inline">
                            <label class="offers-label" id="tier-value-label">Min to</label>
                            <input type="number" name="value" id="tier-value" step="0.01" min="0" class="offers-input" placeholder="85" style="max-width: 100px;" title="Minimum required">
                        </div>
                        <div class="offers-form-row offers-inline" id="tier-value-max-wrap">
                            <label class="offers-label" id="tier-value-max-label">Max</label>
                            <span id="tier-value-max-display" class="offers-max-display">100%</span>
                        </div>
                    </div>
                </div>
                <div class="offers-form-row" id="add-rule-decline-message-wrap">
                    <label class="offers-label">Decline message</label>
                    <textarea name="decline_message" id="add-decline-message" class="offers-input" rows="2" placeholder="{{ \App\Models\OfferDeclineRule::DEFAULT_DECLINE_MESSAGE }}" style="width:100%; max-width:480px;"></textarea>
                    <span class="offers-hint-inline">Shown when this rule declines the offer. Leave empty for default.</span>
                </div>
                <div class="offers-form-actions">
                    <button type="submit" class="btn btn-primary">Add rule</button>
                </div>
            </form>
        </div>
    </section>

    <div id="offer-details-modal" class="offers-modal" role="dialog" aria-labelledby="offer-details-modal-title" aria-modal="true" hidden>
        <div class="offers-modal-backdrop"></div>
        <div class="offers-modal-box">
            <div class="offers-modal-header">
                <h2 id="offer-details-modal-title" class="offers-modal-title">Offer details</h2>
                <span id="offer-details-modal-status" class="offers-modal-status"></span>
                <button type="button" class="offers-modal-close" aria-label="Close">&times;</button>
            </div>
            <div class="offers-modal-body">
                <div class="offers-detail-grid">
                    <div class="offers-detail-section">
                        <h3 class="offers-detail-heading">Customer</h3>
                        <dl class="offers-detail-list">
                            <dt>Name</dt><dd id="od-customer-name">—</dd>
                            <dt>Email</dt><dd id="od-customer-email">—</dd>
                            <dt>Phone</dt><dd id="od-customer-phone">—</dd>
                        </dl>
                    </div>
                    <div class="offers-detail-section">
                        <h3 class="offers-detail-heading">Product & offer</h3>
                        <div id="od-product-wrap" class="offers-detail-product-wrap"></div>
                        <dl class="offers-detail-list">
                            <dt>Cost</dt><dd id="od-cost">—</dd>
                            <dt>Offer amount</dt>
                            <dd id="od-offer-amount-wrap"><span id="od-offer-amount">—</span><span id="od-decline-rule-suffix" class="offers-decline-rule-suffix" style="display:none;"></span></dd>
                            <dt>Sale price</dt><dd id="od-sale-price">—</dd>
                            <dt>Discount amount</dt><dd id="od-discount-amount">—</dd>
                            <dt>Profit (gross)</dt><dd id="od-profit">—</dd>
                        </dl>
                    </div>
                    <div class="offers-detail-section">
                        <h3 class="offers-detail-heading">Fees (Offer settings)</h3>
                        <p class="offers-detail-fees-desc">Applied from Settings → Offer. Used to estimate net profit.</p>
                        <dl class="offers-detail-list">
                            <dt>Gateway / payment fee (%)</dt><dd id="od-gateway-fee-pct">—</dd>
                            <dt>Gateway fee ($)</dt><dd id="od-gateway-fee-amount">—</dd>
                            <dt>Shipping fee ($)</dt><dd id="od-shipping-fee">—</dd>
                            <dt>Real profit (net)</dt><dd id="od-profit-after-fees" class="offers-detail-real-profit">—</dd>
                        </dl>
                    </div>
                    <div id="od-notifications-section" class="offers-detail-section offers-detail-section--full" style="display:none;">
                        <h3 class="offers-detail-heading">Customer notifications</h3>
                        <dl class="offers-detail-list">
                            <dt>Email</dt>
                            <dd id="od-email-notification">—</dd>
                            <dt>SMS</dt>
                            <dd id="od-sms-notification">—</dd>
                        </dl>
                    </div>
                    <div id="od-coupon-section" class="offers-detail-section">
                        <h3 class="offers-detail-heading">Coupon / discount</h3>
                        <dl class="offers-detail-list">
                            <dt>Created at</dt><dd id="od-created-at">—</dd>
                            <dt>Discount code</dt><dd id="od-discount-code">—</dd>
                            <dt>Expires at</dt><dd id="od-expires-at">—</dd>
                        </dl>
                    </div>
                    <div id="od-coupon-pending-msg" class="offers-detail-section" style="display:none;">
                        <p class="offers-detail-pending-msg">No coupon yet. This offer is pending acceptance.</p>
                    </div>
                    <div id="od-rules-section" class="offers-detail-section offers-detail-section--full">
                        <h3 class="offers-detail-heading">Rules applied to this coupon</h3>
                        <p id="od-rules" class="offers-detail-rules">Automatic discount: one customer, one product, fixed amount off; combinable with shipping. Valid until the expiration date above.</p>
                    </div>
                    <div id="od-question-wrap" class="offers-detail-section offers-detail-section--full" style="display:none;">
                        <h3 class="offers-detail-heading">Customer note / question</h3>
                        <p id="od-question" class="offers-detail-note"></p>
                    </div>
                    <div id="od-awaiting-customer-msg" class="offers-detail-section offers-detail-section--full" style="display:none;">
                        <p class="offers-detail-pending-msg">Waiting for the customer to accept or decline the proposed price (email and SMS were sent with personal links).</p>
                    </div>
                    <div id="od-counter-history-wrap" class="offers-detail-section offers-detail-section--full" style="display:none;">
                        <h3 class="offers-detail-heading">Rules decline &amp; counter-offer</h3>
                        <p id="od-counter-history-text" class="offers-detail-note" style="font-size:0.9rem;"></p>
                    </div>
                    <div id="od-propose-counter-wrap" class="offers-detail-section offers-detail-section--full" style="display:none;">
                        <h3 class="offers-detail-heading">Send proposal to customer</h3>
                        <p class="offers-detail-fees-desc" style="margin-bottom:0.75rem;">The customer receives email and SMS (if a valid US phone is on file) with links to accept or decline your price. When they accept, <strong>this same row</strong> moves to <strong>Pending</strong> so you can accept it here and create the coupon. No duplicate offer is created.</p>
                        <form id="od-propose-counter-form" method="post" action="" class="offers-propose-counter-form">
                            @csrf
                            <div class="offers-form-row" style="margin-bottom:0.75rem;">
                                <label for="od-propose-amount" class="offers-label">Proposed price ($)</label>
                                <input type="number" name="offer_amount" id="od-propose-amount" class="offers-input" step="0.01" min="0.01" required style="max-width: 140px;">
                            </div>
                            <div class="offers-form-row" style="margin-bottom:0.75rem;">
                                <label for="od-propose-message" class="offers-label">Optional note to customer</label>
                                <textarea name="message_to_customer" id="od-propose-message" class="offers-input" rows="2" maxlength="2000" style="max-width:100%; width:100%; max-width:480px;" placeholder="Shown in the customer email (optional)"></textarea>
                            </div>
                            <p id="od-propose-preview" class="offers-detail-fees-desc" style="margin-bottom:0.75rem;">—</p>
                            <button type="submit" id="od-propose-submit" class="offers-btn offers-btn--accept">Send proposal to customer</button>
                        </form>
                    </div>
                    <div id="od-pending-actions" class="offers-detail-section offers-detail-section--full offers-modal-pending-actions" style="display:none;">
                        <h3 class="offers-detail-heading">Decision</h3>
                        <div id="od-pending-actions-inner" class="offers-modal-pending-buttons"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function(){
  var form = document.getElementById('offers-form');
  var panelProducts = document.getElementById('panel-products');
  var panelCollections = document.getElementById('panel-collections');
  var modeProducts = document.getElementById('mode-products');
  var modeCollections = document.getElementById('mode-collections');

  // Loading state when saving offer link settings (can take time for many products/collections)
  var saveBtn = document.getElementById('offers-save-settings-btn');
  if (form && saveBtn) {
    form.addEventListener('submit', function() {
      saveBtn.disabled = true;
      saveBtn.innerHTML = '<span class="offers-save-spinner" aria-hidden="true"></span> Applying changes...';
    });
  }

  // Loading state when adding offer link to theme
  var addLinkForm = document.getElementById('offers-add-link-form');
  var addLinkBtn = document.getElementById('offers-add-link-btn');
  if (addLinkForm && addLinkBtn) {
    addLinkForm.addEventListener('submit', function() {
      addLinkBtn.disabled = true;
      addLinkBtn.innerHTML = '<span class="offers-save-spinner" aria-hidden="true"></span> Applying changes...';
    });
  }

  // Loading state when updating offer link on theme
  var updateLinkForm = document.getElementById('offers-update-link-form');
  var updateLinkBtn = document.getElementById('offers-update-link-btn');
  if (updateLinkForm && updateLinkBtn) {
    updateLinkForm.addEventListener('submit', function() {
      updateLinkBtn.disabled = true;
      updateLinkBtn.innerHTML = '<span class="offers-save-spinner" aria-hidden="true"></span> Applying changes...';
    });
  }

  var statusSelect = document.getElementById('offers-filter-status');
  if (statusSelect) {
    statusSelect.addEventListener('change', function(){
      var params = @json(array_merge(request()->query(), []));
      params.status = this.value;
      var qs = Object.keys(params).filter(function(k){ return params[k] !== '' && params[k] !== null; }).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]); }).join('&');
      var url = '{{ route('offers.index') }}' + (qs ? '?' + qs : '') + '#client-offers';
      window.location = url;
    });
  }
  var offersDateFilterBtn = document.getElementById('offersDateFilterBtn');
  var offersDateFilterDropdown = document.getElementById('offersDateFilterDropdown');
  if (offersDateFilterBtn && offersDateFilterDropdown) {
    offersDateFilterBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      offersDateFilterDropdown.hidden = !offersDateFilterDropdown.hidden;
      offersDateFilterBtn.setAttribute('aria-expanded', offersDateFilterDropdown.hidden ? 'false' : 'true');
    });
    offersDateFilterDropdown.addEventListener('click', function(e) { e.stopPropagation(); });
    document.addEventListener('click', function() { offersDateFilterDropdown.hidden = true; offersDateFilterBtn.setAttribute('aria-expanded', 'false'); });
  }
  document.querySelectorAll('.offers-pagination-wrap a[href]').forEach(function(a){
    if (a.getAttribute('href').indexOf('#client-offers') === -1) a.href = a.getAttribute('href') + '#client-offers';
  });

  function addedProductIds(){
    return Array.from(form.querySelectorAll('input[name="product_ids[]"]')).map(function(i){ return i.value; });
  }
  function addedCollectionIds(){
    return Array.from(form.querySelectorAll('input[name="collection_ids[]"]')).map(function(i){ return i.value; });
  }
  function excludedCollectionIds(){
    return Array.from(form.querySelectorAll('input[name="excluded_collection_ids[]"]')).map(function(i){ return i.value; });
  }

  // Toggle panels: only Products or only Collections visible
  function updatePanels(){
    if (modeProducts && modeProducts.checked) {
      if (panelProducts) panelProducts.style.display = '';
      if (panelCollections) panelCollections.style.display = 'none';
    } else {
      if (panelProducts) panelProducts.style.display = 'none';
      if (panelCollections) panelCollections.style.display = '';
    }
  }
  if (modeProducts) modeProducts.addEventListener('change', updatePanels);
  if (modeCollections) modeCollections.addEventListener('change', updatePanels);
  updatePanels();

  // Product search
  document.getElementById('product-search-btn').addEventListener('click', function(){
    var q = document.getElementById('product-search').value.trim();
    var res = document.getElementById('product-search-results');
    res.innerHTML = q ? 'Searching...' : '';
    if (!q) return;
    fetch('{{ route("offers.search-products") }}?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
      .then(function(r){ return r.json(); })
      .then(function(data){
        var list = (data.products || []).map(function(p){
          var already = addedProductIds().indexOf(String(p.numeric_id)) >= 0;
          var imgAttr = (p.image ? ' data-image="' + String(p.image).replace(/"/g, '&quot;') + '"' : '');
          return '<div class="offers-result-item">' +
            '<span>' + (p.title || '') + '</span>' +
            (already ? '<span class="offers-already">Added</span>' : '<button type="button" class="offers-add-btn" data-id="' + p.numeric_id + '" data-title="' + (p.title || '').replace(/"/g, '&quot;') + '"' + imgAttr + ' data-type="product">Add</button>') +
            '</div>';
        }).join('');
        res.innerHTML = list.length ? '<div class="offers-results-box">' + list + '</div>' : '<span class="offers-not-found">No existe.</span>';
        res.querySelectorAll('.offers-add-btn').forEach(function(btn){
          btn.addEventListener('click', function(){
            var id = this.getAttribute('data-id');
            var title = this.getAttribute('data-title') || ('Product ' + id);
            var img = this.getAttribute('data-image');
            if (addedProductIds().indexOf(id) >= 0) return;
            var ul = document.getElementById('added-products-list');
            var li = document.createElement('li');
            li.className = 'offers-added-li';
            var thumb = img ? '<img src="' + img.replace(/"/g, '&quot;') + '" alt="" class="offers-product-thumb" width="40" height="40" loading="lazy">' : '<span class="offers-product-thumb offers-product-thumb-placeholder"></span>';
            li.innerHTML = '<input type="hidden" name="product_ids[]" value="' + id + '">' + thumb + '<span class="offers-product-title">' + (title.replace(/</g, '&lt;').replace(/>/g, '&gt;')) + '</span>' + '<button type="button" class="offers-remove-btn" data-id="' + id + '" data-type="product">Remove</button>';
            ul.appendChild(li);
            li.querySelector('.offers-remove-btn').addEventListener('click', function(){ li.remove(); });
            var addedSpan = document.createElement('span');
            addedSpan.className = 'offers-already';
            addedSpan.textContent = 'Added';
            this.replaceWith(addedSpan);
          });
        });
      })
      .catch(function(){ res.innerHTML = '<span class="offers-not-found">No existe.</span>'; });
  });

  // Collection search
  document.getElementById('collection-search-btn').addEventListener('click', function(){
    var q = document.getElementById('collection-search').value.trim();
    var res = document.getElementById('collection-search-results');
    res.innerHTML = q ? 'Searching...' : '';
    if (!q) return;
    fetch('{{ route("offers.search-collections") }}?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
      .then(function(r){ return r.json(); })
      .then(function(data){
        var list = (data.collections || []).map(function(c){
          var already = addedCollectionIds().indexOf(String(c.numeric_id)) >= 0;
          return '<div class="offers-result-item">' +
            '<span>' + (c.title || '') + ' (ID ' + c.numeric_id + ')</span>' +
            (already ? '<span class="offers-already">Added</span>' : '<button type="button" class="offers-add-btn" data-id="' + c.numeric_id + '" data-title="' + (c.title || '').replace(/"/g, '&quot;') + '" data-type="collection">Add</button>') +
            '</div>';
        }).join('');
        res.innerHTML = list.length ? '<div class="offers-results-box">' + list + '</div>' : '<span class="offers-not-found">No existe.</span>';
        res.querySelectorAll('.offers-add-btn').forEach(function(btn){
          btn.addEventListener('click', function(){
            var id = this.getAttribute('data-id');
            var title = this.getAttribute('data-title');
            if (addedCollectionIds().indexOf(id) >= 0) return;
            var ul = document.getElementById('added-collections-list');
            var li = document.createElement('li');
            li.className = 'offers-added-li';
            li.innerHTML = '<input type="hidden" name="collection_ids[]" value="' + id + '">' +
              '<span>' + (title || 'Collection ' + id) + '</span>' +
              '<button type="button" class="offers-remove-btn" data-id="' + id + '" data-type="collection">Remove</button>';
            ul.appendChild(li);
            li.querySelector('.offers-remove-btn').addEventListener('click', function(){ li.remove(); });
            this.replaceWith('<span class="offers-already">Added</span>');
          });
        });
      })
      .catch(function(){ res.innerHTML = '<span class="offers-not-found">No existe.</span>'; });
  });

  // Excluded collection search
  document.getElementById('excluded-collection-search-btn').addEventListener('click', function(){
    var q = document.getElementById('excluded-collection-search').value.trim();
    var res = document.getElementById('excluded-collection-search-results');
    res.innerHTML = q ? 'Searching...' : '';
    if (!q) return;
    fetch('{{ route("offers.search-collections") }}?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
      .then(function(r){ return r.json(); })
      .then(function(data){
        var list = (data.collections || []).map(function(c){
          var already = excludedCollectionIds().indexOf(String(c.numeric_id)) >= 0;
          return '<div class="offers-result-item">' +
            '<span>' + (c.title || '') + ' (ID ' + c.numeric_id + ')</span>' +
            (already ? '<span class="offers-already">Excluded</span>' : '<button type="button" class="offers-add-btn" data-id="' + c.numeric_id + '" data-title="' + (c.title || '').replace(/"/g, '&quot;') + '" data-type="excluded-collection">Exclude</button>') +
            '</div>';
        }).join('');
        res.innerHTML = list.length ? '<div class="offers-results-box">' + list + '</div>' : '<span class="offers-not-found">No existe.</span>';
        res.querySelectorAll('.offers-add-btn').forEach(function(btn){
          btn.addEventListener('click', function(){
            var id = this.getAttribute('data-id');
            var title = this.getAttribute('data-title');
            if (excludedCollectionIds().indexOf(id) >= 0) return;
            var ul = document.getElementById('excluded-collections-list');
            var li = document.createElement('li');
            li.className = 'offers-added-li';
            li.innerHTML = '<input type="hidden" name="excluded_collection_ids[]" value="' + id + '">' +
              '<span>' + (title || 'Collection ' + id) + '</span>' +
              '<button type="button" class="offers-remove-btn" data-id="' + id + '" data-type="excluded-collection">Remove</button>';
            ul.appendChild(li);
            li.querySelector('.offers-remove-btn').addEventListener('click', function(){ li.remove(); });
            this.replaceWith('<span class="offers-already">Excluded</span>');
          });
        });
      })
      .catch(function(){ res.innerHTML = '<span class="offers-not-found">No existe.</span>'; });
  });

  // Remove buttons (existing and future)
  form.addEventListener('click', function(e){
    if (e.target && e.target.classList && e.target.classList.contains('offers-remove-btn')){
      e.target.closest('.offers-added-li').remove();
    }
  });

  // Offer decline rules: show tier params when type = tier
  var ruleType = document.getElementById('rule-type');
  var paramsTier = document.getElementById('rule-params-tier');
  var tierValueType = document.getElementById('tier-value-type');
  var tierValueLabel = document.getElementById('tier-value-label');
  var tierValueMaxWrap = document.getElementById('tier-value-max-wrap');
  var tierValueMaxLabel = document.getElementById('tier-value-max-label');
  function toggleRuleParams(){
    var t = ruleType ? ruleType.value : '';
    if (paramsTier) paramsTier.style.display = (t === 'tier') ? 'block' : 'none';
    if (t === 'tier' && tierValueType) toggleTierValueType();
  }
  function toggleTierValueType(){
    var isFixed = tierValueType && tierValueType.value === 'fixed';
    if (tierValueLabel) tierValueLabel.textContent = isFixed ? 'Min profit $' : 'Min margin %';
    if (tierValueMaxWrap) tierValueMaxWrap.style.display = '';
    var maxDisplay = document.getElementById('tier-value-max-display');
    if (maxDisplay) maxDisplay.textContent = isFixed ? 'Max' : '100%';
  }
  if (ruleType) ruleType.addEventListener('change', toggleRuleParams);
  if (tierValueType) tierValueType.addEventListener('change', toggleTierValueType);
  toggleRuleParams();

  // Edit tier rule: show/hide edit form
  document.querySelectorAll('.offers-rule-edit-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = this.getAttribute('data-toggle');
      var wrap = id ? document.getElementById(id) : null;
      if (wrap) wrap.style.display = wrap.style.display === 'none' ? 'block' : 'none';
    });
  });
  document.querySelectorAll('.offers-rule-edit-cancel').forEach(function(btn){
    btn.addEventListener('click', function(){
      var id = this.getAttribute('data-toggle');
      var wrap = id ? document.getElementById(id) : null;
      if (wrap) wrap.style.display = 'none';
    });
  });
})();
</script>
<style>
.offers-page { max-width: none; }
.offers-header { margin-bottom: 1.5rem; }
.offers-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.25rem 0; color: #111; }
.offers-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; }
.offers-stats-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem; }
.offers-stats-row-label { font-size: 0.9rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; margin-top: 0.75rem; }
.offers-stats-row-label:first-child { margin-top: 0; }
.offers-stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.offers-stat-item { display: flex; flex-direction: column; gap: 0.25rem; }
.offers-stat-label { font-size: 0.85rem; color: #6b7280; }
.offers-stat-value { font-size: 1.5rem; font-weight: 700; color: #111; }
.offers-stat-value-by-rules { font-size: 0.95rem; font-weight: 600; color: #dc2626; margin-left: 0.15rem; }
.offers-stats-note { margin: 0.75rem 0 0 0; font-size: 0.85rem; color: #6b7280; line-height: 1.5; }
.offers-stats-note a { color: #1e40af; text-decoration: underline; }
.offers-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.offers-section-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem 0; color: #1f2937; }
.offers-section-desc { margin: 0 0 1rem 0; font-size: 0.9rem; color: #6b7280; line-height: 1.5; }
.offers-form { margin-bottom: 1.5rem; }
.offers-form-row { margin-bottom: 1.25rem; }
.offers-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: #374151; }
.offers-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; }
.offers-hint { display: block; font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem; }
.offers-checkbox-label { font-weight: normal; font-size: 0.95rem; cursor: pointer; }
.offers-mode-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.35rem; }
.offers-radio-label { font-weight: normal; font-size: 0.95rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.offers-not-found { color: #b91c1c; font-size: 0.9rem; }
.offers-search-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.offers-search-results { min-height: 1.5rem; margin-top: 0.5rem; font-size: 0.9rem; }
.offers-results-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.5rem; max-height: 200px; overflow-y: auto; }
.offers-result-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid #eee; }
.offers-result-item:last-child { border-bottom: none; }
.offers-add-btn { padding: 0.25rem 0.5rem; font-size: 0.85rem; cursor: pointer; }
.offers-already { font-size: 0.85rem; color: #059669; }
.offers-added-list { margin-top: 0.75rem; }
.offers-added-title { font-size: 0.9rem; font-weight: 600; color: #374151; }
.offers-added-ul { list-style: none; padding: 0; margin: 0.35rem 0 0 0; }
.offers-added-li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; font-size: 0.9rem; }
.offers-product-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.offers-product-thumb-placeholder { width: 40px; height: 40px; flex-shrink: 0; background: #e5e7eb; border-radius: 4px; display: inline-block; }
.offers-product-title { flex: 1; min-width: 0; }
.offers-remove-btn { padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; color: #b91c1c; background: transparent; border: 1px solid #fecaca; border-radius: 4px; }
.offers-remove-btn:hover { background: #fee2e2; }
.offers-max-display { display: inline-block; padding: 0.5rem 0.75rem; font-size: 1rem; font-weight: 600; color: #374151; }
.offers-form-actions { margin-top: 1rem; }
.offers-save-spinner { display: inline-block; width: 1em; height: 1em; margin-right: 0.5rem; vertical-align: -0.15em; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: offers-save-spin 0.7s linear infinite; }
@keyframes offers-save-spin { to { transform: rotate(360deg); } }
.offers-theme-actions { padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.offers-theme-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.offers-theme-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.35rem 0; color: #1f2937; }
.offers-theme-desc { font-size: 0.9rem; color: #6b7280; margin: 0 0 0.75rem 0; }
.offers-decline-rules { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #e5e7eb; }
.offers-rules-list { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.offers-rules-li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #eee; }
.offers-rules-li:last-child { border-bottom: none; }
.offers-rule-label { font-size: 0.9rem; color: #374151; flex: 1; min-width: 0; }
.offers-rule-edit-wrap { flex: 1 1 100%; width: 100%; }
.offers-rule-form .offers-form-row { margin-bottom: 0.75rem; }
.offers-tier-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 0.5rem; }
.offers-form-row.offers-inline { margin-bottom: 0; }
.offers-hint-inline { font-size: 0.8rem; color: #6b7280; align-self: center; }
.offers-placeholder { padding: 1.5rem; background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 8px; color: #6b7280; font-size: 0.9rem; }
.offers-client-offers-section { overflow: hidden; }
.offers-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.5rem; padding: 0 0.5rem; margin-bottom: 0.5rem; }
.offers-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.offers-table th, .offers-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.offers-table th { font-weight: 600; color: #374151; background: #f9fafb; }
.offers-table td { color: #1f2937; }
.offers-table-datetime-cell { width: 1%; max-width: 6rem; white-space: normal; }
.offers-table-datetime-cell .offers-table-date { display: block; font-size: 0.9rem; }
.offers-table-datetime-cell .offers-table-time { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 0.15rem; }
.offers-table-product-cell { white-space: normal; width: 1%; max-width: 240px; }
.offers-table-product-wrap { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.offers-table-product-wrap .offers-table-img,
.offers-table-product-wrap .offers-table-img-placeholder { flex-shrink: 0; }
.offers-table-product-title { flex: 1; min-width: 0; word-break: break-word; font-size: 0.85rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.offers-table-img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.offers-table-img-placeholder { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #f3f4f6; border-radius: 4px; color: #9ca3af; font-size: 0.85rem; }
.offers-status { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.85rem; font-weight: 500; }
.offers-status-pending { background: #fef3c7; color: #92400e; }
.offers-status-accepted { background: #d1fae5; color: #065f46; }
.offers-status-completed { background: #dbeafe; color: #1e40af; }
.offers-status-declined { background: #fee2e2; color: #991b1b; }
.offers-status-declined_by_rules { background: #fef3c7; color: #92400e; }
.offers-status-awaiting_customer { background: #e0e7ff; color: #3730a3; }
.offers-status-counter_declined { background: #f3f4f6; color: #4b5563; }
.offers-status-expired { background: #e5e7eb; color: #4b5563; }
.offers-filters-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.offers-filter-group { display: flex; flex-direction: column; gap: 0.35rem; }
.offers-filter-label { font-size: 0.9rem; font-weight: 600; color: #374151; }
.offers-filter-select { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; min-width: 140px; }
.offers-date-filter { position: relative; display: block; min-width: 160px; }
.offers-date-filter-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-width: 0; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; color: #374151; cursor: pointer; box-sizing: border-box; }
.offers-date-filter-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.offers-date-filter-arrow { font-size: 0.7rem; color: #6b7280; flex-shrink: 0; }
.offers-date-filter-dropdown { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 240px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); z-index: 50; padding: 0.5rem 0; }
.offers-date-filter-presets { display: flex; flex-direction: column; }
.offers-date-preset { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; color: #374151; text-decoration: none; }
.offers-date-preset:hover { background: #f3f4f6; }
.offers-date-preset.is-active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.offers-date-filter-custom { border-top: 1px solid #e5e7eb; margin-top: 0.5rem; padding: 0.75rem 1rem; }
.offers-date-custom-title { font-size: 0.8rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; }
.offers-date-custom-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.offers-date-custom-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #6b7280; }
.offers-date-input { padding: 0.35rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.offers-date-apply-btn { padding: 0.4rem 0.75rem; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.offers-date-apply-btn:hover { background: #1d4ed8; }
.offers-pagination-wrap { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; clear: both; }
.offers-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.offers-pagination-info { color: #6b7280; }
.offers-pagination-nav { display: flex; align-items: center; gap: 0.35rem; }
.offers-pagination-link, .offers-pagination-page { display: inline-block; padding: 0.35rem 0.6rem; border-radius: 6px; text-decoration: none; border: 1px solid #e5e7eb; font-size: 0.9rem; }
.offers-pagination-link { background: #f3f4f6; color: #1f2937; }
.offers-pagination-link:hover { background: #e5e7eb; }
.offers-pagination-link--disabled { color: #9ca3af; cursor: default; border-color: #e5e7eb; background: #f9fafb; }
.offers-pagination-pages { display: inline-flex; align-items: center; gap: 0.2rem; }
.offers-pagination-page { background: #f3f4f6; color: #1f2937; min-width: 2rem; text-align: center; }
.offers-pagination-page:hover { background: #e5e7eb; }
.offers-pagination-page--current { background: #e5e7eb; color: #1f2937; font-weight: 600; border-color: #d1d5db; cursor: default; }
.offers-pagination-page--current:hover { background: #e5e7eb; }
.offers-alert { padding: 0.6rem 0.9rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.offers-alert--success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.offers-alert--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.offers-table-actions-cell { white-space: nowrap; }
.offers-table-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.offers-action-form { display: inline-block; margin: 0; }
.offers-btn { display: inline-block; padding: 0.3rem 0.6rem; font-size: 0.8rem; font-weight: 600; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.offers-btn--accept { background: #059669; color: #fff; border-color: #047857; }
.offers-btn--accept:hover:not(:disabled) { background: #047857; }
.offers-btn--accept:disabled { opacity: 0.55; cursor: not-allowed; background: #6b7280; border-color: #4b5563; }
.offers-btn--decline { background: #dc2626; color: #fff; border-color: #b91c1c; }
.offers-btn--decline:hover { background: #b91c1c; }
.offers-btn--details { background: #1e40af; color: #fff; border-color: #1e3a8a; }
.offers-btn--details:hover { background: #1e3a8a; }
.offers-btn--notify { background: #fff; color: #1e40af; border-color: #1e40af; }
.offers-btn--notify:hover { background: #eff6ff; }
.offers-notified-caption { font-size: 0.8rem; font-weight: 600; color: #047857; padding: 0.3rem 0.5rem; white-space: nowrap; }
.offers-table-actions-empty { color: #9ca3af; }
.offers-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.offers-modal[hidden] { display: none; }
.offers-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); cursor: pointer; }
.offers-modal-box { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; }
.offers-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.offers-modal-title { margin: 0; font-size: 1.15rem; font-weight: 600; color: #111; }
.offers-modal-status { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; }
.offers-modal-status--pending { background: #fef3c7; color: #92400e; }
.offers-modal-status--accepted { background: #d1fae5; color: #065f46; }
.offers-modal-status--completed { background: #dbeafe; color: #1e40af; }
.offers-modal-status--declined_by_rules { background: #fef3c7; color: #92400e; }
.offers-modal-status--awaiting_customer { background: #e0e7ff; color: #3730a3; }
.offers-modal-status--counter_declined { background: #f3f4f6; color: #4b5563; }
.offers-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6b7280; padding: 0.25rem; }
.offers-modal-close:hover { color: #111; }
.offers-modal-body { padding: 1.25rem; }
.offers-detail-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.offers-detail-section--full { width: 100%; }
.offers-detail-heading { margin: 0 0 0.5rem 0; font-size: 0.95rem; font-weight: 600; color: #374151; }
.offers-detail-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; }
.offers-detail-list dt { color: #6b7280; }
.offers-detail-list dd { margin: 0; color: #111; word-break: break-word; }
.offers-detail-product-wrap { margin-bottom: 0.75rem; }
.offers-detail-product-wrap .offers-table-product-wrap { display: flex; align-items: center; gap: 0.75rem; }
.offers-detail-product-wrap .offers-table-img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.offers-detail-product-wrap .offers-table-product-title { font-weight: 600; color: #111; }
.offers-detail-rules { margin: 0; font-size: 0.9rem; color: #4b5563; line-height: 1.5; }
.offers-detail-note { margin: 0; font-size: 0.9rem; color: #374151; line-height: 1.5; white-space: pre-wrap; }
.offers-detail-fees-desc { margin: 0 0 0.5rem 0; font-size: 0.8rem; color: #6b7280; }
.offers-detail-real-profit { font-weight: 600; color: #059669; }
.offers-detail-pending-msg { margin: 0; font-size: 0.9rem; color: #6b7280; font-style: italic; }
.offers-modal-pending-actions { padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.offers-modal-pending-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.offers-modal-pending-buttons .offers-action-form { display: inline-block; margin: 0; }
</style>
@endsection

@push('scripts')
<script>
(function() {
  var modal = document.getElementById('offer-details-modal');
  if (!modal) return;

  function closeModal() {
    modal.setAttribute('hidden', '');
  }

  function fmtMoney(n) {
    return n !== null && n !== undefined && !isNaN(n) ? '$' + Number(n).toFixed(2) : '—';
  }

  document.body.addEventListener('click', function(e) {
    var btn = e.target.closest && e.target.closest('.offers-btn-view-details');
    if (!btn) return;
    e.preventDefault();
    e.stopPropagation();
    var raw = btn.getAttribute('data-offer-details');
    if (!raw) return;
    var d;
    try {
      var decoded = (typeof atob !== 'undefined') ? atob(raw) : raw;
      d = JSON.parse(decoded);
    } catch (err) { return; }

    function el(id) { return document.getElementById(id); }
    var isPending = !!d.is_pending;
    var isDeclinedByRules = !!d.is_declined_by_rules;
    var isAwaitingCustomer = !!d.is_awaiting_customer;
    var isCounterDeclined = !!d.is_counter_declined;
    if (el('offer-details-modal-status')) {
      var statusText, statusClass;
      if (isCounterDeclined) {
        statusText = 'Proposal declined';
        statusClass = 'counter_declined';
      } else if (isAwaitingCustomer) {
        statusText = 'Awaiting customer';
        statusClass = 'awaiting_customer';
      } else if (isDeclinedByRules) {
        statusText = 'Declined by rules';
        statusClass = 'declined_by_rules';
      } else if (isPending) {
        statusText = 'Pending';
        statusClass = 'pending';
      } else {
        statusText = d.is_completed ? 'Completed' : 'Accepted';
        statusClass = d.is_completed ? 'completed' : 'accepted';
      }
      el('offer-details-modal-status').textContent = statusText;
      el('offer-details-modal-status').className = 'offers-modal-status offers-modal-status--' + statusClass;
    }
    var couponSection = el('od-coupon-section');
    var couponPendingMsg = el('od-coupon-pending-msg');
    var rulesSection = el('od-rules-section');
    if (couponSection) couponSection.style.display = (isPending || isDeclinedByRules || isAwaitingCustomer || isCounterDeclined) ? 'none' : '';
    if (couponPendingMsg) couponPendingMsg.style.display = isPending ? '' : 'none';
    if (rulesSection) rulesSection.style.display = (isPending || isDeclinedByRules || isAwaitingCustomer || isCounterDeclined) ? 'none' : '';

    var awaitingMsg = el('od-awaiting-customer-msg');
    if (awaitingMsg) awaitingMsg.style.display = isAwaitingCustomer ? '' : 'none';

    var proposeWrap = el('od-propose-counter-wrap');
    var proposeForm = el('od-propose-counter-form');
    var proposeAmt = el('od-propose-amount');
    var proposePreview = el('od-propose-preview');
    var proposeSubmit = el('od-propose-submit');
    if (proposeWrap && proposeForm && proposeAmt && proposePreview) {
      if (isDeclinedByRules && d.can_propose_counter_offer && d.propose_counter_offer_url) {
        proposeWrap.style.display = '';
        proposeForm.setAttribute('action', d.propose_counter_offer_url);
        var initOffer = (d.offer_amount != null && !isNaN(d.offer_amount)) ? Number(d.offer_amount) : null;
        var listPx = (d.sale_price != null && !isNaN(d.sale_price)) ? Number(d.sale_price) : null;
        function r2(x) { return Math.round(x * 100) / 100; }
        var minPropose = (initOffer != null) ? r2(initOffer + 0.01) : null;
        var maxPropose = (listPx != null) ? r2(listPx - 0.01) : null;
        var bandOk = (minPropose != null && maxPropose != null && minPropose <= maxPropose);
        if (bandOk) {
          proposeAmt.setAttribute('min', minPropose.toFixed(2));
          proposeAmt.setAttribute('max', maxPropose.toFixed(2));
        } else {
          proposeAmt.removeAttribute('min');
          proposeAmt.removeAttribute('max');
        }
        proposeAmt.value = (initOffer != null) ? Number(initOffer).toFixed(2) : '';
        function counterOfferValid(amt) {
          if (isNaN(amt) || initOffer == null || listPx == null) return false;
          return r2(amt) > r2(initOffer) && r2(amt) < r2(listPx);
        }
        function updateProposePreview() {
          var amt = parseFloat(String(proposeAmt.value).replace(/,/g, ''));
          var submitBtn = proposeSubmit || proposeForm.querySelector('button[type="submit"]');
          if (initOffer == null || listPx == null) {
            proposePreview.textContent = 'Missing original offer or list price; cannot validate the proposal range.';
            if (submitBtn) { submitBtn.disabled = true; submitBtn.setAttribute('aria-disabled', 'true'); }
            return;
          }
          if (!bandOk) {
            proposePreview.textContent = 'There is no valid range: your counter must be greater than the customer\'s offer (' + fmtMoney(initOffer) + ') and below list price (' + fmtMoney(listPx) + ').';
            if (submitBtn) { submitBtn.disabled = true; submitBtn.setAttribute('aria-disabled', 'true'); }
            return;
          }
          if (isNaN(amt)) {
            proposePreview.textContent = 'Enter a proposed price. It must be greater than ' + fmtMoney(initOffer) + ' and less than ' + fmtMoney(listPx) + '.';
            if (submitBtn) { submitBtn.disabled = true; submitBtn.setAttribute('aria-disabled', 'true'); }
            return;
          }
          var ok = counterOfferValid(amt);
          var cost = d.cost;
          var gwPct = Number(d.gateway_fee_percent);
          var ship = Number(d.shipping_fee_amount);
          var gross = (cost != null && !isNaN(cost)) ? (amt - cost) : null;
          var gwAmt = (!isNaN(gwPct) ? amt * (gwPct / 100) : 0);
          var net = (gross != null && !isNaN(ship)) ? (gross - gwAmt - ship) : null;
          var parts = [];
          if (gross != null && !isNaN(gross)) parts.push('Gross profit: ' + fmtMoney(gross));
          if (net != null && !isNaN(net)) parts.push('Est. net after fees: ' + fmtMoney(net));
          proposePreview.textContent = parts.length ? parts.join('. ') + '.' : '—';
          if (!ok) {
            if (r2(amt) <= r2(initOffer)) proposePreview.textContent += ' Must be greater than the customer\'s offer (' + fmtMoney(initOffer) + '), not equal.';
            else if (r2(amt) >= r2(listPx)) proposePreview.textContent += ' Must be below list price (' + fmtMoney(listPx) + ').';
          }
          if (submitBtn) {
            submitBtn.disabled = !ok;
            submitBtn.setAttribute('aria-disabled', ok ? 'false' : 'true');
          }
        }
        updateProposePreview();
        proposeAmt.oninput = updateProposePreview;
        proposeForm.onsubmit = function (ev) {
          var amt = parseFloat(String(proposeAmt.value).replace(/,/g, ''));
          if (!counterOfferValid(amt)) {
            ev.preventDefault();
            updateProposePreview();
            return false;
          }
        };
      } else {
        proposeWrap.style.display = 'none';
        proposeAmt.oninput = null;
        proposeForm.onsubmit = null;
      }
    }

    var pendingActions = el('od-pending-actions');
    var pendingActionsInner = el('od-pending-actions-inner');
    if (pendingActions && pendingActionsInner) {
      if (isPending && d.accept_url && d.decline_url) {
        var csrf = (document.querySelector('.offers-page') && document.querySelector('.offers-page').getAttribute('data-csrf')) || '';
        var esc = function(s) { return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); };
        var tokenInput = '<input type="hidden" name="_token" value="' + esc(csrf) + '">';
        pendingActionsInner.innerHTML = '<form method="post" action="' + esc(d.accept_url) + '" class="offers-action-form" style="display:inline;">' + tokenInput + '<button type="submit" class="offers-btn offers-btn--accept">Accept</button></form> ' +
          '<form method="post" action="' + esc(d.decline_url) + '" class="offers-action-form" style="display:inline;" onsubmit="return confirm(\'Decline this offer? The customer will be notified.\');">' + tokenInput + '<button type="submit" class="offers-btn offers-btn--decline">Decline</button></form>';
        pendingActions.style.display = '';
      } else {
        pendingActions.style.display = 'none';
        pendingActionsInner.innerHTML = '';
      }
    }

    if (el('od-customer-name')) el('od-customer-name').textContent = d.customer_name || '—';
    if (el('od-customer-email')) el('od-customer-email').textContent = d.customer_email || '—';
    if (el('od-customer-phone')) el('od-customer-phone').textContent = d.customer_phone || '—';

    var productWrap = el('od-product-wrap');
    if (productWrap) {
      var img = d.product_image_url ? '<img src="' + String(d.product_image_url).replace(/"/g, '&quot;') + '" alt="" width="56" height="56" class="offers-table-img" style="border-radius:4px;">' : '<span class="offers-table-img-placeholder">—</span>';
      productWrap.innerHTML = '<div class="offers-table-product-wrap">' + img + '<span class="offers-table-product-title">' + String(d.product_title || '—').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</span></div>';
    }
    if (el('od-cost')) el('od-cost').textContent = fmtMoney(d.cost);
    var offerAmtEl = el('od-offer-amount');
    var ruleSuffixEl = el('od-decline-rule-suffix');
    if (offerAmtEl) offerAmtEl.textContent = fmtMoney(d.offer_amount);
    if (ruleSuffixEl) {
      var lbls = d.decline_rule_failure_labels;
      var hints = d.decline_rule_failure_hints;
      if (isDeclinedByRules && Array.isArray(lbls) && lbls.length > 0) {
        ruleSuffixEl.style.display = 'block';
        ruleSuffixEl.style.marginTop = '0.25rem';
        ruleSuffixEl.style.color = '#92400e';
        ruleSuffixEl.style.fontSize = '0.88em';
        ruleSuffixEl.style.lineHeight = '1.35';
        ruleSuffixEl.style.whiteSpace = 'pre-line';
        var hintLines = [];
        if (Array.isArray(hints)) {
          hints.forEach(function (h) {
            if (h != null && String(h).trim() !== '') hintLines.push(String(h).trim());
          });
        }
        var block = 'Declined by rule(s): ' + lbls.map(function (x) { return String(x); }).join('; ');
        if (hintLines.length) block += '\n\n' + hintLines.join('\n\n');
        ruleSuffixEl.textContent = block;
      } else {
        ruleSuffixEl.style.display = 'none';
        ruleSuffixEl.textContent = '';
        ruleSuffixEl.style.whiteSpace = '';
      }
    }
    if (el('od-sale-price')) el('od-sale-price').textContent = fmtMoney(d.sale_price);
    if (el('od-discount-amount')) el('od-discount-amount').textContent = fmtMoney(d.discount_amount);
    if (el('od-profit')) el('od-profit').textContent = fmtMoney(d.profit);
    if (el('od-gateway-fee-pct')) el('od-gateway-fee-pct').textContent = (d.gateway_fee_percent != null && !isNaN(d.gateway_fee_percent)) ? Number(d.gateway_fee_percent).toFixed(2) + '%' : '—';
    if (el('od-gateway-fee-amount')) el('od-gateway-fee-amount').textContent = fmtMoney(d.gateway_fee_amount);
    if (el('od-shipping-fee')) el('od-shipping-fee').textContent = fmtMoney(d.shipping_fee_amount);
    if (el('od-profit-after-fees')) el('od-profit-after-fees').textContent = fmtMoney(d.profit_after_fees);
    if (el('od-discount-code')) el('od-discount-code').textContent = d.discount_code || '—';
    if (el('od-expires-at')) el('od-expires-at').textContent = d.expires_at || '—';
    if (el('od-created-at')) el('od-created-at').textContent = d.created_at || '—';

    var notifSection = el('od-notifications-section');
    var emailNotif = el('od-email-notification');
    var smsNotif = el('od-sms-notification');
    if (notifSection && emailNotif && smsNotif) {
      if (isPending || isDeclinedByRules) {
        notifSection.style.display = 'none';
      } else {
        notifSection.style.display = '';
        var emailSent = d.offer_accepted_email_sent_at || '';
        var emailOpened = d.offer_accepted_email_opened_at || '';
        var emailLine = emailSent ? ('Sent at ' + emailSent + (emailOpened ? '. Opened: Yes (at ' + emailOpened + ')' : '. Opened: No')) : 'Not sent';
        emailNotif.textContent = emailLine;
        var smsSent = d.offer_accepted_sms_sent_at || '';
        var smsFailReason = (d.offer_accepted_sms_fail_reason || '').trim();
        var smsStatus = (d.offer_accepted_sms_status || '').trim().toLowerCase();
        // Twilio statuses: queued, sending, sent, delivered, undelivered, failed (show as-is, capitalized)
        var smsStatusLabel = smsStatus ? (smsStatus.charAt(0).toUpperCase() + smsStatus.slice(1)) : '';
        var smsLine = smsSent ? ('Sent at ' + smsSent + (smsStatusLabel ? '. Status: ' + smsStatusLabel : '')) : (smsFailReason ? ('Not sent: ' + smsFailReason) : 'Not sent');
        smsNotif.textContent = smsLine;
      }
    }

    var qWrap = el('od-question-wrap');
    var qEl = el('od-question');
    if (qWrap && qEl) {
      if (d.question && String(d.question).trim()) { qWrap.style.display = ''; qEl.textContent = d.question; } else { qWrap.style.display = 'none'; }
    }

    var histWrap = el('od-counter-history-wrap');
    var histText = el('od-counter-history-text');
    if (histWrap && histText) {
      var origAmt = d.original_customer_offer_before_counter;
      if (origAmt != null && origAmt !== '' && !isNaN(Number(origAmt))) {
        histWrap.style.display = '';
        var origFmt = fmtMoney(origAmt);
        var curFmt = fmtMoney(d.offer_amount);
        var tail = '';
        if (isAwaitingCustomer) {
          tail = 'Status: awaiting the customer\'s response on your counter-offer (' + curFmt + ').';
        } else if (isPending) {
          tail = 'The customer accepted your counter-offer of ' + curFmt + '; this offer is pending your final acceptance to issue the coupon.';
        } else if (isCounterDeclined) {
          tail = 'The customer declined your counter-offer of ' + curFmt + '.';
        } else if (!isDeclinedByRules) {
          tail = 'The agreed price is ' + curFmt + '.';
        }
        histText.textContent = 'Original customer offer (declined by automated rules): ' + origFmt + '. Counter-offer / current row amount (Offer amount above): ' + curFmt + '. ' + tail;
      } else {
        histWrap.style.display = 'none';
        histText.textContent = '';
      }
    }

    modal.removeAttribute('hidden');
  });

  var back = modal.querySelector('.offers-modal-backdrop');
  var closeBtn = modal.querySelector('.offers-modal-close');
  if (back) back.addEventListener('click', closeModal);
  if (closeBtn) closeBtn.addEventListener('click', closeModal);
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modal && !modal.hasAttribute('hidden')) closeModal();
  });
})();
</script>
@endpush