@extends('layouts.app')

@section('title', 'Marketing')

@section('content')
@php
    $marketingTz = config('app.deals_display_timezone', 'America/New_York');
    $todayDate = now($marketingTz)->format('Y-m-d');
    $discountDefaults = ($marketingSettings ?? \App\Models\MarketingSetting::get())->discountModalDefaults();
    $defaultExpiryDays = (int) ($discountDefaults['coupon_default_expiry_days'] ?? 15);
@endphp
<div class="marketing-page" data-today="{{ $todayDate }}">
    <header class="marketing-header">
        <h1>Marketing</h1>
        <p class="marketing-subtitle">Abandoned checkouts — contacts and products left at checkout. Use this list to follow up with customers (e.g. email or discount).</p>
    </header>

    <section class="marketing-coupon-type-stats" aria-label="Marketing coupons by type">
        <div class="marketing-coupon-type-grid">
            <div class="marketing-coupon-type-item">
                <span class="marketing-coupon-type-label" title="Active automatic Marketing coupons in Shopify (title: Abandoned checkout). Excludes Offers and other discount types.">Automatic coupons (active in Shopify)</span>
                <span class="marketing-coupon-type-value">{{ $marketingStats['automatic_coupons'] ?? 0 }}</span>
            </div>
            <div class="marketing-coupon-type-item">
                <span class="marketing-coupon-type-label" title="Active manual (code) Marketing coupons in Shopify (title: Abandoned checkout)">Manual coupons (active in Shopify)</span>
                <span class="marketing-coupon-type-value">{{ $marketingStats['manual_coupons'] ?? 0 }}</span>
            </div>
            <div class="marketing-coupon-type-item">
                <span class="marketing-coupon-type-label" title="All active Marketing coupons in Shopify (automatic + manual). Shopify may show more discounts if you include Offers or discounts created in Admin.">Total Marketing (active in Shopify)</span>
                <span class="marketing-coupon-type-value">{{ $marketingStats['total_coupons'] ?? 0 }}</span>
            </div>
        </div>
        @if($marketingStats['coupon_stats_from_shopify'] ?? true)
        <p class="marketing-coupon-type-note">Counts match Shopify: only active discounts titled &quot;Abandoned checkout&quot; (created from this Marketing menu). Offers and other discounts are not included.</p>
        @else
        <p class="marketing-coupon-type-note marketing-coupon-type-note-warn">Could not load counts from Shopify; showing active coupons from the local database instead.</p>
        @endif
    </section>

    <section class="marketing-stats-card">
        <div class="marketing-stats-grid">
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="All orders that were completed or paid (abandoned checkouts in Recovered state)">Recovered orders</span>
                <span class="marketing-stat-value">{{ $marketingStats['total_recovered'] ?? 0 }}</span>
            </div>
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="Recovered orders that used a discount code created from this Marketing menu">Recovered with coupon</span>
                <span class="marketing-stat-value">{{ $marketingStats['recovered_with_coupon'] ?? 0 }}</span>
            </div>
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="All Marketing coupon records ever created from this menu (including expired and used)">Total coupons (all time)</span>
                <span class="marketing-stat-value">{{ $marketingStats['total_coupons_all_time'] ?? $marketingStats['total_coupons'] ?? 0 }}</span>
            </div>
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="Expired coupons (logic to be implemented later)">Expired coupons</span>
                <span class="marketing-stat-value">{{ $marketingStats['expired_coupons'] ?? 0 }}</span>
            </div>
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="Coupons deleted by the API (logic to be implemented later)">Deleted coupons</span>
                <span class="marketing-stat-value">{{ $marketingStats['deleted_coupons'] ?? 0 }}</span>
            </div>
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="Coupons temporarily paused because the product is in Deal of the Day">Deactivated coupons</span>
                <span class="marketing-stat-value">{{ $marketingStats['deactivated_coupons'] ?? 0 }}</span>
            </div>
            <div class="marketing-stat-item">
                <span class="marketing-stat-label" title="Email or SMS discount notifications sent today; resets at midnight">Notifications sent today</span>
                <span class="marketing-stat-value">{{ $marketingStats['notifications_sent_today'] ?? 0 }}</span>
            </div>
        </div>
        <p class="marketing-stats-note"><strong>Recovered orders</strong>: all abandoned checkouts that were later completed (paid). <strong>Recovered with coupon</strong>: those that used a discount code created from the cards below. <strong>Expired</strong>: coupons created from these cards and deactivated after expiration (only Marketing coupons are counted; Shopify may show more if you have other discounts). <strong>Deleted</strong>: cumulative count of coupons deleted from Shopify (via the Settings button or the scheduled cleanup). <strong>Deactivated</strong>: coupons temporarily paused while the product is in Deal of the Day; they reactivate automatically when the deal ends. <strong>Notifications sent today</strong>: count of discount emails and SMS sent today; resets to 0 at midnight.</p>
        <p class="marketing-stats-note"><a href="{{ route('marketing.index', $queryParams ?? []) }}">Refresh stats now</a> to see the latest numbers immediately. <a href="{{ route('setting.marketing') }}">Configure Marketing settings (coupon cleanup, test email/SMS) in Setting →</a></p>
    </section>

    @php
        $qp = $queryParams ?? ['range' => 'today', 'status' => 'open', 'email' => 'all', 'contact' => 'any', 'discount' => 'all', 'discounts_used' => 'all', 'from' => '', 'to' => ''];
        $baseParams = function($overrides = []) use ($qp) {
            $merged = array_merge([
                'range' => $qp['range'] ?? 'today',
                'status' => $qp['status'] ?? 'open',
                'email' => $qp['email'] ?? 'all',
                'contact' => $qp['contact'] ?? 'any',
                'discount' => $qp['discount'] ?? 'all',
                'discounts_used' => $qp['discounts_used'] ?? 'all',
                'from' => $qp['from'] ?? null,
                'to' => $qp['to'] ?? null,
            ], $overrides);
            return array_filter($merged, function ($v) { return $v !== null && $v !== ''; });
        };
        $dateLink = function($range) use ($baseParams) { return route('marketing.index', $baseParams(['range' => $range])); };
        $statusLink = function($status) use ($baseParams) { return route('marketing.index', $baseParams(['status' => $status])); };
        $emailLink = function($email) use ($baseParams) { return route('marketing.index', $baseParams(['email' => $email])); };
        $contactLink = function($contact) use ($baseParams) { return route('marketing.index', $baseParams(['contact' => $contact])); };
        $discountsUsedLink = function($value) use ($baseParams) { return route('marketing.index', $baseParams(['discounts_used' => $value])); };
    @endphp
    <div class="marketing-filters">
        <div class="marketing-filter-group">
            <span class="marketing-filter-title">Date</span>
            <div class="marketing-date-filter">
                <button type="button" class="marketing-date-filter-btn" id="marketingDateFilterBtn" aria-haspopup="true" aria-expanded="false">
                    <span class="marketing-date-filter-label">{{ $dateRangeLabel ?? 'Today' }}</span>
                    <span class="marketing-date-filter-arrow">▾</span>
                </button>
            <div id="marketingDateFilterDropdown" class="marketing-date-filter-dropdown" hidden>
                <div class="marketing-date-filter-presets">
                    <a href="{{ $dateLink('today') }}" class="marketing-date-preset {{ ($dateRange ?? 'today') === 'today' ? 'is-active' : '' }}">Today</a>
                    <a href="{{ $dateLink('yesterday') }}" class="marketing-date-preset {{ ($dateRange ?? '') === 'yesterday' ? 'is-active' : '' }}">Yesterday</a>
                    <a href="{{ $dateLink('last_30_minutes') }}" class="marketing-date-preset {{ ($dateRange ?? '') === 'last_30_minutes' ? 'is-active' : '' }}">Last 30 minutes</a>
                    <a href="{{ $dateLink('last_12_hours') }}" class="marketing-date-preset {{ ($dateRange ?? '') === 'last_12_hours' ? 'is-active' : '' }}">Last 12 hours</a>
                    <a href="{{ $dateLink('last_7_days') }}" class="marketing-date-preset {{ ($dateRange ?? '') === 'last_7_days' ? 'is-active' : '' }}">Last 7 days</a>
                    <a href="{{ $dateLink('last_30_days') }}" class="marketing-date-preset {{ ($dateRange ?? '') === 'last_30_days' ? 'is-active' : '' }}">Last 30 days</a>
                </div>
                <div class="marketing-date-filter-custom">
                    <div class="marketing-date-custom-title">Custom date range</div>
                    <form method="get" action="{{ route('marketing.index') }}" class="marketing-date-custom-form">
                        <input type="hidden" name="range" value="custom">
                        <input type="hidden" name="status" value="{{ $statusFilter ?? 'open' }}">
                        <input type="hidden" name="email" value="{{ $emailFilter ?? 'all' }}">
                        <input type="hidden" name="contact" value="{{ $contactFilter ?? 'any' }}">
                        <input type="hidden" name="discounts_used" value="{{ $discountsUsedFilter ?? 'without' }}">
                        <label class="marketing-date-custom-label">
                            <span>From</span>
                            <input type="date" name="from" value="{{ $dateFrom ?? '' }}" class="marketing-date-input">
                        </label>
                        <label class="marketing-date-custom-label">
                            <span>To</span>
                            <input type="date" name="to" value="{{ $dateTo ?? '' }}" class="marketing-date-input">
                        </label>
                        <button type="submit" class="marketing-date-apply-btn">Apply</button>
                    </form>
                </div>
            </div>
            </div>
        </div>
        <div class="marketing-filter-group">
            <span class="marketing-filter-title">Status</span>
            <div class="marketing-status-filter">
                <button type="button" class="marketing-date-filter-btn" id="marketingStatusFilterBtn" aria-haspopup="true" aria-expanded="false">
                    <span class="marketing-date-filter-label">{{ $statusFilterLabel ?? 'Open' }}</span>
                    <span class="marketing-date-filter-arrow">▾</span>
                </button>
                <div id="marketingStatusFilterDropdown" class="marketing-date-filter-dropdown" hidden>
                    <div class="marketing-date-filter-presets">
                        <a href="{{ $statusLink('open') }}" class="marketing-date-preset {{ ($statusFilter ?? 'open') === 'open' ? 'is-active' : '' }}">Open</a>
                        <a href="{{ $statusLink('recovered') }}" class="marketing-date-preset {{ ($statusFilter ?? '') === 'recovered' ? 'is-active' : '' }}">Recovered</a>
                        <a href="{{ $statusLink('all') }}" class="marketing-date-preset {{ ($statusFilter ?? '') === 'all' ? 'is-active' : '' }}">All</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="marketing-filter-group">
            <span class="marketing-filter-title">Notification</span>
            <div class="marketing-email-filter">
                <button type="button" class="marketing-date-filter-btn" id="marketingEmailFilterBtn" aria-haspopup="true" aria-expanded="false">
                    <span class="marketing-date-filter-label">{{ $emailFilterLabel ?? 'All' }}</span>
                    <span class="marketing-date-filter-arrow">▾</span>
                </button>
                <div id="marketingEmailFilterDropdown" class="marketing-date-filter-dropdown" hidden>
                    <div class="marketing-date-filter-presets">
                        <a href="{{ $emailLink('all') }}" class="marketing-date-preset {{ ($emailFilter ?? 'all') === 'all' ? 'is-active' : '' }}">All</a>
                        <a href="{{ $emailLink('notified') }}" class="marketing-date-preset {{ ($emailFilter ?? '') === 'notified' ? 'is-active' : '' }}">Notified</a>
                        <a href="{{ $emailLink('pending') }}" class="marketing-date-preset {{ ($emailFilter ?? '') === 'pending' ? 'is-active' : '' }}">Pending</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="marketing-filter-group">
            <span class="marketing-filter-title">Contact</span>
            <div class="marketing-contact-filter">
                <button type="button" class="marketing-date-filter-btn" id="marketingContactFilterBtn" aria-haspopup="true" aria-expanded="false">
                    <span class="marketing-date-filter-label">{{ $contactFilterLabel ?? 'Any' }}</span>
                    <span class="marketing-date-filter-arrow">▾</span>
                </button>
                <div id="marketingContactFilterDropdown" class="marketing-date-filter-dropdown" hidden>
                    <div class="marketing-date-filter-presets">
                        <a href="{{ $contactLink('email') }}" class="marketing-date-preset {{ ($contactFilter ?? 'any') === 'email' ? 'is-active' : '' }}">Email</a>
                        <a href="{{ $contactLink('mobile') }}" class="marketing-date-preset {{ ($contactFilter ?? '') === 'mobile' ? 'is-active' : '' }}">Mobile</a>
                        <a href="{{ $contactLink('any') }}" class="marketing-date-preset {{ ($contactFilter ?? '') === 'any' ? 'is-active' : '' }}">Any</a>
                        <a href="{{ $contactLink('all') }}" class="marketing-date-preset {{ ($contactFilter ?? '') === 'all' ? 'is-active' : '' }}">Both</a>
                        <a href="{{ $contactLink('all_entries') }}" class="marketing-date-preset {{ ($contactFilter ?? '') === 'all_entries' ? 'is-active' : '' }}">All entries</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="marketing-filter-group">
            <span class="marketing-filter-title">Discount</span>
            <div class="marketing-discounts-used-filter">
                <button type="button" class="marketing-date-filter-btn" id="marketingDiscountsUsedFilterBtn" aria-haspopup="true" aria-expanded="false">
                    <span class="marketing-date-filter-label">{{ $discountsUsedFilterLabel ?? 'Without discounts' }}</span>
                    <span class="marketing-date-filter-arrow">▾</span>
                </button>
                <div id="marketingDiscountsUsedFilterDropdown" class="marketing-date-filter-dropdown" hidden>
                    <div class="marketing-date-filter-presets">
                        <a href="{{ $discountsUsedLink('all') }}" class="marketing-date-preset {{ ($discountsUsedFilter ?? '') === 'all' ? 'is-active' : '' }}">All</a>
                        <a href="{{ $discountsUsedLink('without') }}" class="marketing-date-preset {{ ($discountsUsedFilter ?? 'without') === 'without' ? 'is-active' : '' }}">Without discounts</a>
                        <a href="{{ $discountsUsedLink('unused') }}" class="marketing-date-preset {{ ($discountsUsedFilter ?? '') === 'unused' ? 'is-active' : '' }}">Unused</a>
                        <a href="{{ $discountsUsedLink('used') }}" class="marketing-date-preset {{ ($discountsUsedFilter ?? '') === 'used' ? 'is-active' : '' }}">Used</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="marketing-cards-wrapper">
        @include('marketing.partials.cards', [
            'abandonedCheckouts' => $abandonedCheckouts,
            'marketingFeeDefaults' => $discountDefaults,
        ])
    </div>
</div>

{{-- Modal: Create discount for this customer --}}
<div id="createDiscountModal" class="marketing-modal" role="dialog" aria-modal="true" aria-labelledby="createDiscountModalTitle" hidden>
    <div class="marketing-modal-backdrop"></div>
    <div class="marketing-modal-box">
        <div class="marketing-modal-header">
            <h2 id="createDiscountModalTitle" class="marketing-modal-title">Create discount</h2>
            <button type="button" class="marketing-modal-close" aria-label="Close">&times;</button>
        </div>
        <div class="marketing-modal-body">
            <p class="marketing-modal-customer" id="createDiscountCustomer"></p>

            <section class="marketing-modal-section" aria-label="Product summary">
                <h3 class="marketing-modal-section-title">Product summary</h3>
                <p class="marketing-modal-hint">Choose which product(s) the discount will apply to:</p>
                <div id="createDiscountProductSummary" class="marketing-product-summary"></div>
                <div class="marketing-discount-row">
                    <label class="marketing-inline-label">Discount type</label>
                    <div class="marketing-radio-group">
                        <label><input type="radio" name="discount_type" value="percentage"> Percentage %</label>
                        <label><input type="radio" name="discount_type" value="fixed" checked> Fixed amount $</label>
                    </div>
                </div>
                <div class="marketing-discount-row">
                    <label class="marketing-inline-label" for="discount_value">Discount value</label>
                    <input type="number" id="discount_value" name="discount_value" min="0" step="0.01" value="10" class="marketing-input">
                    <span id="discount_value_suffix"></span>
                </div>
                <div class="marketing-discount-row" id="create_discount_auto_apply_row">
                    <label class="marketing-inline-label">Apply at checkout</label>
                    <div id="create_discount_auto_apply_choices" class="marketing-radio-group">
                        <label><input type="radio" name="create_discount_auto_apply" value="1"> Automatic</label>
                        <label><input type="radio" name="create_discount_auto_apply" value="0" checked> Manual (customer enters code)</label>
                    </div>
                    <p id="create_discount_auto_apply_locked" class="marketing-modal-hint marketing-auto-apply-locked" hidden></p>
                    <span id="create_discount_auto_apply_hint" class="marketing-modal-hint">Automatic applies the offer at checkout for this customer; manual requires them to enter the code.</span>
                </div>
                <div class="marketing-discount-row">
                    <label class="marketing-inline-label">Coupon expires</label>
                    <div class="marketing-radio-group">
                        <label><input type="radio" name="create_discount_expires" value="1" id="create_discount_expires_yes" checked> Yes</label>
                        <label><input type="radio" name="create_discount_expires" value="0" id="create_discount_expires_no"> No</label>
                    </div>
                </div>
                <div class="marketing-discount-row" id="create_discount_ends_at_row">
                    <label class="marketing-inline-label" for="create_discount_ends_at">Expiration date</label>
                    <input type="date" id="create_discount_ends_at" name="create_discount_ends_at" class="marketing-input">
                    <span class="marketing-modal-hint">Default: {{ $defaultExpiryDays }} {{ $defaultExpiryDays === 1 ? 'day' : 'days' }} from today. We'll send the customer a reminder before it expires.</span>
                </div>
                <p class="marketing-discount-rules">This creates a <strong>discount code</strong> in Shopify. Rules applied: amount off selected products only; one-time purchase; valid for this customer only; no minimum; one use per customer; cannot be combined with other discounts.</p>
                <div class="marketing-preview-row">
                    <strong>Final price for customer:</strong>
                    <span id="createDiscountFinalPrice" class="marketing-final-price">—</span>
                </div>
                <div class="marketing-preview-row">
                    <strong>What you'll earn (gross):</strong>
                    <span id="createDiscountEarnings" class="marketing-final-price">—</span>
                </div>
            </section>

            <section class="marketing-modal-section" aria-label="Fees">
                <h3 class="marketing-modal-section-title">Fees (optional)</h3>
                <p class="marketing-modal-hint">Include these to see your net and set a fair discount. Defaults come from <a href="{{ route('setting.fees') }}">Setting → Fees &amp; profit</a>.</p>
                <div class="marketing-fees-grid">
                    <label class="marketing-fee-row">
                        <input type="checkbox" id="fee_gateway" class="marketing-fee-check" @if($discountDefaults['fee_default_gateway']) checked @endif>
                        <span>Include payment gateway fee %</span>
                        <input type="number" id="fee_gateway_pct" value="{{ $discountDefaults['fee_gateway_pct'] }}" min="0" step="0.1" class="marketing-fee-input" @if(!$discountDefaults['fee_default_gateway']) disabled @endif>
                    </label>
                    <label class="marketing-fee-row">
                        <input type="checkbox" id="fee_commission" class="marketing-fee-check" @if($discountDefaults['fee_default_commission']) checked @endif>
                        <span>Include sales commission fee $</span>
                        <input type="number" id="fee_commission_amt" value="{{ $discountDefaults['fee_commission_amt'] }}" min="0" step="0.01" class="marketing-fee-input" @if(!$discountDefaults['fee_default_commission']) disabled @endif>
                    </label>
                    <label class="marketing-fee-row">
                        <input type="checkbox" id="fee_shipping" class="marketing-fee-check" @if($discountDefaults['fee_default_shipping']) checked @endif>
                        <span>Include shipping fee $</span>
                        <input type="number" id="fee_shipping_amt" value="{{ $discountDefaults['fee_shipping_amt'] }}" min="0" step="0.01" class="marketing-fee-input" @if(!$discountDefaults['fee_default_shipping']) disabled @endif>
                    </label>
                    <label class="marketing-fee-row">
                        <input type="checkbox" id="fee_extra" class="marketing-fee-check" @if($discountDefaults['fee_default_extra']) checked @endif>
                        <span>Include extra fee $</span>
                        <input type="number" id="fee_extra_amt" value="{{ $discountDefaults['fee_extra_amt'] }}" min="0" step="0.01" class="marketing-fee-input" @if(!$discountDefaults['fee_default_extra']) disabled @endif>
                    </label>
                </div>
                <div class="marketing-preview-row" id="createDiscountNetRow" style="display: none;">
                    <strong>What you'll earn (after fees):</strong>
                    <span id="createDiscountNet" class="marketing-final-price">—</span>
                </div>
            </section>
        </div>
        <div class="marketing-modal-footer">
            <button type="button" class="marketing-modal-btn-cancel">Cancel</button>
            <button type="button" id="createDiscountSubmit" class="marketing-modal-btn-create">Create</button>
        </div>
    </div>
</div>

{{-- Modal: Choose notification channel (Email / SMS / Both) when customer has both --}}
<div id="notifyCustomerModal" class="marketing-modal" role="dialog" aria-modal="true" aria-labelledby="notifyCustomerModalTitle" hidden>
    <div class="marketing-modal-backdrop"></div>
    <div class="marketing-modal-box">
        <div class="marketing-modal-header">
            <h2 id="notifyCustomerModalTitle" class="marketing-modal-title">Send notification</h2>
            <button type="button" class="marketing-modal-close marketing-notify-modal-close" aria-label="Close">&times;</button>
        </div>
        <div class="marketing-modal-body">
            <p class="marketing-modal-hint">This customer has both email and phone. Choose how to notify them:</p>
            <div class="marketing-notify-options">
                <label class="marketing-notify-option">
                    <input type="radio" name="notify_channel" value="email" class="marketing-notify-radio">
                    <span>Email only</span>
                </label>
                <label class="marketing-notify-option">
                    <input type="radio" name="notify_channel" value="sms" class="marketing-notify-radio">
                    <span>SMS only</span>
                </label>
                <label class="marketing-notify-option">
                    <input type="radio" name="notify_channel" value="both" class="marketing-notify-radio" checked>
                    <span>Both (Email and SMS)</span>
                </label>
            </div>
        </div>
        <div class="marketing-modal-footer">
            <button type="button" class="marketing-modal-btn-cancel marketing-notify-modal-close">Cancel</button>
            <button type="button" id="notifyCustomerSendBtn" class="marketing-modal-btn-create">Send</button>
        </div>
    </div>
</div>

{{-- Modal: Notification already sent today — recommend waiting 1 day --}}
<div id="notificationAlreadySentModal" class="marketing-modal" role="dialog" aria-modal="true" aria-labelledby="notificationAlreadySentModalTitle" hidden>
    <div class="marketing-modal-backdrop"></div>
    <div class="marketing-modal-box">
        <div class="marketing-modal-header">
            <h2 id="notificationAlreadySentModalTitle" class="marketing-modal-title">Notification already sent today</h2>
            <button type="button" class="marketing-modal-close notification-already-sent-close" aria-label="Close">&times;</button>
        </div>
        <div class="marketing-modal-body">
            <p id="notificationAlreadySentMessage" class="marketing-notify-already-sent-message"></p>
            <p class="marketing-notify-already-sent-recommendation">To maintain a professional experience for the customer, we recommend waiting at least one day before sending another notification.</p>
        </div>
        <div class="marketing-modal-footer">
            <button type="button" class="marketing-modal-btn-cancel notification-already-sent-close">Close</button>
            <button type="button" id="notificationAlreadySentSendAnyway" class="marketing-modal-btn-create">Send anyway</button>
        </div>
    </div>
</div>

{{-- Modal: Edit fees (opens from icon next to Profit after fees) --}}
<div id="editFeesModal" class="marketing-modal" role="dialog" aria-modal="true" aria-labelledby="editFeesModalTitle" hidden>
    <div class="marketing-modal-backdrop"></div>
    <div class="marketing-modal-box">
        <div class="marketing-modal-header">
            <h2 id="editFeesModalTitle" class="marketing-modal-title">Edit fees</h2>
            <button type="button" class="marketing-modal-close" aria-label="Close">&times;</button>
        </div>
        <div class="marketing-modal-body">
            <p class="marketing-modal-hint">Change the default fees below to see how they affect your profit (after fees).</p>
            <div class="marketing-fees-grid">
                <label class="marketing-fee-row">
                    <input type="checkbox" id="edit_fee_gateway" class="marketing-fee-check" @if($discountDefaults['fee_default_gateway']) checked @endif>
                    <span>Payment gateway fee %</span>
                    <input type="number" id="edit_fee_gateway_pct" value="{{ $discountDefaults['fee_gateway_pct'] }}" min="0" step="0.1" class="marketing-fee-input" @if(!$discountDefaults['fee_default_gateway']) disabled @endif>
                </label>
                <label class="marketing-fee-row">
                    <input type="checkbox" id="edit_fee_commission" class="marketing-fee-check" @if($discountDefaults['fee_default_commission']) checked @endif>
                    <span>Sales commission fee $</span>
                    <input type="number" id="edit_fee_commission_amt" value="{{ $discountDefaults['fee_commission_amt'] }}" min="0" step="0.01" class="marketing-fee-input" @if(!$discountDefaults['fee_default_commission']) disabled @endif>
                </label>
                <label class="marketing-fee-row">
                    <input type="checkbox" id="edit_fee_shipping" class="marketing-fee-check" @if($discountDefaults['fee_default_shipping']) checked @endif>
                    <span>Shipping fee $</span>
                    <input type="number" id="edit_fee_shipping_amt" value="{{ $discountDefaults['fee_shipping_amt'] }}" min="0" step="0.01" class="marketing-fee-input" @if(!$discountDefaults['fee_default_shipping']) disabled @endif>
                </label>
                <label class="marketing-fee-row">
                    <input type="checkbox" id="edit_fee_extra" class="marketing-fee-check" @if($discountDefaults['fee_default_extra']) checked @endif>
                    <span>Extra fee $</span>
                    <input type="number" id="edit_fee_extra_amt" value="{{ $discountDefaults['fee_extra_amt'] }}" min="0" step="0.01" class="marketing-fee-input" @if(!$discountDefaults['fee_default_extra']) disabled @endif>
                </label>
            </div>
            <div class="marketing-fees-result" id="editFeesResultBox">
                <strong>Profit (after fees):</strong>
                <span id="editFeesResultTotal" class="marketing-fees-result-total">—</span>
            </div>
        </div>
        <div class="marketing-modal-footer">
            <button type="button" class="marketing-modal-btn-close-fees marketing-modal-btn-cancel">Close</button>
            <button type="button" class="marketing-modal-btn-apply-fees" id="editFeesApplyBtn">Update</button>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function() {
  var dropdownIds = ['marketingDateFilterDropdown', 'marketingStatusFilterDropdown', 'marketingEmailFilterDropdown', 'marketingContactFilterDropdown', 'marketingDiscountsUsedFilterDropdown'];
  var btnIds = ['marketingDateFilterBtn', 'marketingStatusFilterBtn', 'marketingEmailFilterBtn', 'marketingContactFilterBtn', 'marketingDiscountsUsedFilterBtn'];
  function closeAllExcept(exceptIndex) {
    dropdownIds.forEach(function(id, i) {
      var el = document.getElementById(id);
      var b = document.getElementById(btnIds[i]);
      if (el && i !== exceptIndex) { el.hidden = true; if (b) b.setAttribute('aria-expanded', 'false'); }
    });
  }
  dropdownIds.forEach(function(dropdownId, i) {
    var btn = document.getElementById(btnIds[i]);
    var dropdown = document.getElementById(dropdownId);
    if (btn && dropdown) {
      btn.addEventListener('click', function(e) {
        e.stopPropagation();
        dropdown.hidden = !dropdown.hidden;
        closeAllExcept(dropdown.hidden ? -1 : i);
        btn.setAttribute('aria-expanded', dropdown.hidden ? 'false' : 'true');
      });
      dropdown.addEventListener('click', function(e) { e.stopPropagation(); });
    }
  });
  document.addEventListener('click', function() { closeAllExcept(-1); });

  // Restaurar scroll tras recarga automática.
  (function restoreScroll() {
    try {
      var saved = sessionStorage.getItem('marketingScrollY');
      if (saved !== null) {
        sessionStorage.removeItem('marketingScrollY');
        var y = parseInt(saved, 10);
        if (!isNaN(y) && y > 0) requestAnimationFrame(function() { window.scrollTo(0, y); });
      }
    } catch (e) {}
  })();

  var autoRefreshMinutes = {{ (int)($autoRefreshMinutes ?? 0) }};
  if (autoRefreshMinutes > 0) {
    var modalIds = ['createDiscountModal', 'notifyCustomerModal', 'notificationAlreadySentModal', 'editFeesModal'];
    setInterval(function() {
      for (var i = 0; i < modalIds.length; i++) {
        var el = document.getElementById(modalIds[i]);
        if (el && (el.hidden === false || (el.style && el.style.display !== 'none'))) return;
      }
      try { sessionStorage.setItem('marketingScrollY', String(window.scrollY || 0)); } catch (e) {}
      window.location.reload();
    }, autoRefreshMinutes * 60 * 1000);
  }

})();
</script>
@endpush

@push('styles')
<style>
.marketing-page { max-width: 100%; }
.marketing-header { margin-bottom: 1rem; }
.marketing-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.35rem 0; color: #111; }
.marketing-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.marketing-coupon-type-stats { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.marketing-coupon-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; max-width: 720px; margin: 0 auto; text-align: center; }
@media (max-width: 640px) { .marketing-coupon-type-grid { grid-template-columns: 1fr; max-width: 280px; } }
.marketing-coupon-type-item { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; }
.marketing-coupon-type-label { font-size: 0.85rem; color: #6b7280; line-height: 1.3; }
.marketing-coupon-type-value { font-size: 2rem; font-weight: 700; color: #111; line-height: 1.1; }
.marketing-coupon-type-note { margin: 0.75rem 0 0 0; font-size: 0.8rem; color: #6b7280; text-align: center; line-height: 1.45; }
.marketing-coupon-type-note-warn { color: #b45309; }
.marketing-auto-apply-locked { font-weight: 600; color: #374151; margin: 0.25rem 0 0 0; }
.marketing-stats-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
.marketing-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem 1.5rem; }
.marketing-stat-item { display: flex; flex-direction: column; gap: 0.25rem; }
.marketing-stat-label { font-size: 0.8rem; color: #6b7280; line-height: 1.2; }
.marketing-stat-value { font-size: 1.5rem; font-weight: 700; color: #111; }
.marketing-stats-note { margin: 0.75rem 0 0 0; font-size: 0.8rem; color: #6b7280; line-height: 1.45; }
.marketing-settings-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.marketing-settings-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.marketing-settings-desc { margin: 0 0 1rem 0; font-size: 0.85rem; color: #6b7280; line-height: 1.45; }
.marketing-settings-form { display: flex; flex-direction: column; gap: 1rem; }
.marketing-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
@media (max-width: 640px) { .marketing-settings-grid { grid-template-columns: 1fr; } }
.marketing-settings-row { display: flex; flex-direction: column; gap: 0.25rem; }
.marketing-settings-label { font-size: 0.9rem; font-weight: 600; color: #374151; }
.marketing-settings-input { max-width: 8rem; padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; }
.marketing-settings-hint { font-size: 0.8rem; color: #6b7280; }
.marketing-settings-actions { margin-top: 0.25rem; }
#test_email { max-width: 22rem; }
#test_phone { max-width: 12rem; }
.marketing-test-messages-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.marketing-test-messages-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.marketing-test-messages-desc { margin: 0 0 1rem 0; font-size: 0.85rem; color: #6b7280; line-height: 1.45; }
.marketing-test-messages-form { display: flex; flex-direction: column; gap: 1rem; }
.marketing-test-messages-row { display: flex; flex-direction: column; gap: 0.25rem; }
.marketing-test-messages-row .marketing-settings-input { max-width: 20rem; }
.marketing-filters { margin-bottom: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; align-items: end; }
.marketing-filter-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.marketing-filter-title { font-size: 0.7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; display: block; line-height: 1.2; }
@media (min-width: 992px) {
.marketing-filters { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 1rem; }
.marketing-filter-group { min-width: 10rem; flex: 0 1 auto; }
}
.marketing-status-filter { position: relative; display: block; width: 100%; }
.marketing-date-filter { position: relative; display: block; width: 100%; }
.marketing-discount-filter { position: relative; display: block; width: 100%; }
.marketing-email-filter { position: relative; display: block; width: 100%; }
.marketing-contact-filter { position: relative; display: block; width: 100%; }
.marketing-discounts-used-filter { position: relative; display: block; width: 100%; }
.marketing-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; }
.marketing-date-filter-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.marketing-date-filter-arrow { font-size: 0.7rem; color: #6b7280; flex-shrink: 0; }
.marketing-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; }
.marketing-date-filter-presets { display: flex; flex-direction: column; }
.marketing-date-preset { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; color: #374151; text-decoration: none; }
.marketing-date-preset:hover { background: #f3f4f6; }
.marketing-date-preset.is-active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.marketing-date-filter-custom { border-top: 1px solid #e5e7eb; margin-top: 0.5rem; padding: 0.75rem 1rem; }
.marketing-date-custom-title { font-size: 0.8rem; font-weight: 600; color: #6b7280; margin-bottom: 0.5rem; }
.marketing-date-custom-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.marketing-date-custom-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #6b7280; }
.marketing-date-input { padding: 0.35rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.marketing-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; }
.marketing-date-apply-btn:hover { background: #1d4ed8; }
.marketing-empty { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.5rem; color: #475569; font-size: 0.95rem; }
.marketing-empty-hint { margin-top: 0.75rem; font-size: 0.9rem; color: #64748b; }
.marketing-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .marketing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .marketing-grid { grid-template-columns: repeat(3, 1fr); } }
.marketing-card { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e5e7eb; overflow: hidden; display: flex; flex-direction: column; }
.marketing-card--blocked .marketing-card-body { opacity: 0.72; }
.marketing-card-block-stamp {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%) rotate(-14deg);
  pointer-events: none;
  text-align: center;
  padding: 0.55rem 1.1rem 0.5rem;
  color: #b91c1c;
  background: rgba(255, 255, 255, 0.88);
  border: 4px double #dc2626;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.18);
  max-width: calc(100% - 2rem);
}
.marketing-card-block-stamp-label {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}
.marketing-card-block-stamp-reason {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #991b1b;
}
.marketing-card-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; background: #fef3c7; border-bottom: 1px solid #fde68a; }
.marketing-badge { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #92400e; background: #fde68a; padding: 0.25rem 0.5rem; border-radius: 6px; }
.marketing-badge-recovered { color: #065f46; background: #d1fae5; }
.marketing-card-status:has(.marketing-badge-recovered) { background: #ecfdf5; border-bottom-color: #a7f3d0; }
.marketing-card-status .marketing-card-date { flex: 1; min-width: 0; text-align: right; }
.marketing-card-status .marketing-btn-hide-card { flex-shrink: 0; margin-left: 0.5rem; order: 10; }
.marketing-card-status .marketing-badge { flex-shrink: 0; }
.marketing-card-date { font-size: 0.8rem; color: #78716c; }
.marketing-card-date-recovered { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.marketing-card-date-line { display: block; }
.marketing-card-recovered { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.marketing-recovered-message { margin: 0; font-size: 0.9rem; font-weight: 600; color: #065f46; background: #d1fae5; padding: 0.6rem 0.75rem; border-radius: 8px; line-height: 1.4; }
.marketing-btn-hide-card { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: rgba(0,0,0,0.08); color: #57534e; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; }
.marketing-btn-hide-card:hover { background: rgba(0,0,0,0.14); color: #1c1917; }
.marketing-btn-hide-card:disabled { opacity: 0.6; cursor: not-allowed; }
.marketing-card-body { padding: 1rem; flex: 1; }
.marketing-card-field { margin-bottom: 0.75rem; }
.marketing-card-field:last-of-type { margin-bottom: 0; }
.marketing-label { display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.marketing-value { font-size: 0.95rem; color: #111; }
.marketing-value a { color: #2563eb; text-decoration: none; }
.marketing-value a:hover { text-decoration: underline; }
.marketing-muted { color: #9ca3af; }
.marketing-card-products { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.marketing-product-list { list-style: none; margin: 0.35rem 0 0 0; padding: 0; font-size: 0.9rem; }
.marketing-product-list li { padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; }
.marketing-product-list li:last-child { border-bottom: none; }
.marketing-product-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.5rem; }
.marketing-product-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f3f4f6; }
.marketing-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marketing-product-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 0.5rem; }
.marketing-product-title { flex: 1; min-width: 0; color: #374151; font-size: 0.9rem; }
.marketing-product-qty { flex-shrink: 0; color: #6b7280; font-size: 0.9rem; }
.marketing-product-order-completed { display: inline-block; margin-top: 0.2rem; padding: 0.2rem 0.5rem; background: #d1fae5; color: #065f46; font-size: 0.75rem; font-weight: 600; border-radius: 6px; letter-spacing: 0.02em; }
.marketing-product-prices { flex-basis: 100%; width: 100%; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; padding-left: 0; font-size: 0.85rem; box-sizing: border-box; }
.marketing-price-cost { color: #059669; }
.marketing-price-sale { color: #2563eb; font-weight: 600; }
.marketing-price-profit { color: #0d9488; font-weight: 600; }
.marketing-price-profit-fees { color: #047857; font-size: 0.9em; font-weight: 600; }
.marketing-profit-fees-wrap { display: inline-flex; align-items: center; gap: 0.35rem; }
.marketing-icon-edit-fees { display: inline-flex; padding: 0.2rem; color: #2563eb; border-radius: 4px; }
.marketing-icon-edit-fees:hover { background: #eff6ff; color: #1d4ed8; }
.marketing-icon-edit-fees svg { display: block; }
.marketing-discount-value { display: inline-block; margin-left: 0.5rem; font-size: 0.85rem; color: #6b7280; font-weight: 600; }
.marketing-card-discount { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.marketing-discount-header { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.25rem; }
.marketing-discount-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f3f4f6; }
.marketing-discount-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marketing-discount-header-inner { flex: 1; min-width: 0; }
.marketing-card-discount .marketing-label { margin-bottom: 0.25rem; }
.marketing-discount-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.marketing-discount-code { font-weight: 700; font-size: 0.95rem; color: #1e40af; letter-spacing: 0.05em; }
.marketing-discount-status { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; }
.marketing-discount-status-active { background: #d1fae5; color: #065f46; }
.marketing-discount-status-used { background: #dbeafe; color: #1e40af; }
.marketing-discount-status-expired { background: #fef3c7; color: #92400e; }
.marketing-discount-status-canceled { background: #fee2e2; color: #991b1b; }
.marketing-discount-applies { font-size: 0.8rem; color: #059669; margin: 0.25rem 0 0.35rem; }
.marketing-discount-applies-no { color: #b91c1c; }
.marketing-discount-meta { font-size: 0.8rem; color: #6b7280; display: flex; flex-direction: column; gap: 0.15rem; }
.marketing-discount-paused-note { color: #d97706; font-weight: 600; }
.marketing-email-status { margin-top: 0.5rem; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.marketing-email-sent { color: #059669; font-weight: 600; }
.marketing-email-opened { color: #2563eb; }
.marketing-email-opened-no { color: #6b7280; }
.marketing-email-delivered { color: #059669; }
.marketing-email-delivered-no { color: #6b7280; }
.marketing-email-open-hint { margin-left: 4px; cursor: help; opacity: 0.7; font-size: 0.9em; }
.marketing-card-discount-actions { margin-top: 0.5rem; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.marketing-card-discount-actions-notifications { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.marketing-card-discount-actions-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.marketing-btn-send-email { padding: 0.35rem 0.75rem; background: #059669; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.marketing-btn-send-email:hover { background: #047857; }
.marketing-btn-send-email:disabled { opacity: 0.7; cursor: not-allowed; }
.marketing-btn-notify-customer { padding: 0.35rem 0.75rem; background: #0d9488; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.marketing-btn-notify-customer:hover { background: #0f766e; }
.marketing-btn-notify-customer:disabled { opacity: 0.7; cursor: not-allowed; }
.marketing-sms-status { margin-top: 0.5rem; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.marketing-sms-sent { color: #2563eb; font-weight: 600; }
.marketing-sms-delivered { color: #059669; }
.marketing-sms-sent-only { color: #6b7280; }
.marketing-sms-status-failed { color: #dc2626; }
.marketing-notify-options { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.marketing-notify-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.marketing-notify-radio { margin: 0; }
.marketing-notify-already-sent-message { margin: 0 0 0.75rem; font-size: 0.95rem; color: #374151; line-height: 1.5; }
.marketing-notify-already-sent-recommendation { margin: 0; font-size: 0.9rem; color: #6b7280; line-height: 1.5; padding: 0.75rem 1rem; background: #f8fafc; border-radius: 8px; border-left: 4px solid #0d9488; }
.marketing-btn-edit-discount { padding: 0.35rem 0.75rem; background: #f59e0b; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.marketing-btn-edit-discount:hover { background: #d97706; }
.marketing-btn-delete-discount { padding: 0.35rem 0.75rem; background: #dc2626; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.marketing-btn-delete-discount:hover { background: #b91c1c; }
.marketing-card-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.marketing-no-email-hint { margin: 0; font-size: 0.85rem; color: #6b7280; line-height: 1.4; }
.marketing-create-discount-reason { margin: 0; font-size: 0.9rem; color: #6b7280; padding: 0.5rem 0; font-style: italic; }
.marketing-accepted-offer-notice,
.marketing-open-offer-notice { margin: 0 0 0.75rem 0; font-size: 0.9rem; color: #c2410c; font-weight: 500; line-height: 1.4; }
.marketing-story-purchase-notice { margin: 0 0 0.75rem 0; font-size: 0.9rem; color: #1d4ed8; font-weight: 500; line-height: 1.4; }
.marketing-open-offer-notice-inline { margin: 0; font-size: 0.85rem; }
.marketing-open-offer-item { font-weight: 600; }
.marketing-btn-create-discount { display: inline-block; padding: 0.5rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.marketing-btn-create-discount:hover { background: #1d4ed8; }
.marketing-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.marketing-modal[hidden] { display: none; }
.marketing-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.marketing-modal-box { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); max-width: 580px; width: 100%; max-height: 90vh; overflow: auto; }
.marketing-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.marketing-modal-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.marketing-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6b7280; padding: 0.25rem; }
.marketing-modal-close:hover { color: #111; }
.marketing-modal-body { padding: 1rem 1.25rem; }
.marketing-modal-customer { margin: 0 0 1rem; font-size: 0.95rem; color: #4b5563; }
.marketing-modal-section { margin-bottom: 1.25rem; }
.marketing-modal-section-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: #374151; }
.marketing-modal-hint { margin: 0 0 0.5rem; font-size: 0.85rem; color: #6b7280; }
.marketing-product-summary { background: #f8fafc; border-radius: 8px; padding: 0.75rem; margin-bottom: 1rem; font-size: 0.9rem; }
.marketing-product-summary .item { padding: 0.35rem 0; border-bottom: 1px solid #e2e8f0; }
.marketing-product-summary .item:last-child { border-bottom: none; }
.marketing-product-item-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #e2e8f0; cursor: pointer; }
.marketing-product-summary .marketing-product-item-row:last-child { border-bottom: none; }
.marketing-product-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #e2e8f0; }
.marketing-product-item-inner { flex: 1; min-width: 0; }
.marketing-product-summary .item-row-wrap { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid #e2e8f0; }
.marketing-product-summary .item-row-wrap:last-child { border-bottom: none; }
.marketing-product-select-all { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; cursor: pointer; font-weight: 600; color: #374151; }
.marketing-product-item-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid #e2e8f0; cursor: pointer; }
.marketing-product-item-row .item { border-bottom: none; padding: 0; flex: 1; }
.marketing-product-item-row input[type="checkbox"] { margin-top: 0.25rem; flex-shrink: 0; }
.marketing-product-item-row-disabled { cursor: default; opacity: 0.85; }
.marketing-product-item-row-disabled .marketing-product-disabled-note { font-size: 0.8rem; color: #6b7280; font-style: italic; margin-right: 0.5rem; }
.marketing-product-summary .cost { color: #059669; }
.marketing-product-summary .sale { color: #2563eb; font-weight: 600; }
.marketing-discount-row { margin-bottom: 0.75rem; }
.marketing-inline-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
.marketing-radio-group { display: flex; gap: 1rem; }
.marketing-radio-group label { font-size: 0.9rem; cursor: pointer; }
.marketing-input { width: 100px; padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; }
.marketing-discount-rules { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.4; color: #6b7280; }
.marketing-preview-row { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f3f4f6; }
.marketing-final-price { font-size: 1.1rem; color: #059669; font-weight: 600; }
.marketing-fees-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.marketing-fee-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; cursor: pointer; }
.marketing-fee-check { margin: 0; }
.marketing-fees-result { margin-top: 1rem; padding: 0.75rem 1rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; }
.marketing-fees-result strong { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; color: #166534; }
.marketing-fees-result-total { font-size: 1.25rem; font-weight: 700; color: #047857; }
.marketing-fee-input { width: 70px; padding: 0.3rem 0.4rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.marketing-fee-input:disabled { background: #f3f4f6; color: #9ca3af; }
.marketing-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; }
.marketing-modal-btn-cancel { padding: 0.5rem 1rem; background: #f3f4f6; border: none; border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.marketing-modal-btn-apply-fees { padding: 0.5rem 1rem; background: #059669; color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.marketing-modal-btn-apply-fees:hover { background: #047857; }
.marketing-modal-btn-create { padding: 0.5rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.marketing-modal-btn-create:hover { background: #1d4ed8; }
.marketing-modal-btn-create:disabled { opacity: 0.6; cursor: not-allowed; }
</style>
@endpush

@if(!$abandonedCheckouts->isEmpty())
@push('scripts')
<script>
(function() {
  window.marketingCheckouts = @json($marketingCheckoutsForJs);
  window.discountEditLineItemsByIndex = @json($discountEditLineItemsByIndex ?? []);
  window.discountAssignedProductIdsByIndex = @json($discountAssignedProductIdsByIndex ?? []);
  window.marketingDiscountDefaults = @json($discountDefaults);

  function applyMarketingFeeDefaults() {
    var d = window.marketingDiscountDefaults || {};
    var pairs = [
      ['fee_gateway', 'fee_gateway_pct', 'fee_default_gateway'],
      ['fee_commission', 'fee_commission_amt', 'fee_default_commission'],
      ['fee_shipping', 'fee_shipping_amt', 'fee_default_shipping'],
      ['fee_extra', 'fee_extra_amt', 'fee_default_extra']
    ];
    pairs.forEach(function(p) {
      var cb = document.getElementById(p[0]);
      var input = document.getElementById(p[1]);
      if (!cb || !input) return;
      var checked = !!d[p[2]];
      cb.checked = checked;
      input.disabled = !checked;
      var valKey = p[1];
      if (d[valKey] != null) input.value = d[valKey];
    });
  }

  function defaultCouponExpiryDate() {
    var days = parseInt((window.marketingDiscountDefaults || {}).coupon_default_expiry_days, 10);
    if (isNaN(days) || days < 1) days = 15;
    var d = new Date();
    d.setDate(d.getDate() + days);
    return d.toISOString().slice(0, 10);
  }

  var modal = document.getElementById('createDiscountModal');
  var customerEl = document.getElementById('createDiscountCustomer');
  var productSummaryEl = document.getElementById('createDiscountProductSummary');
  var finalPriceEl = document.getElementById('createDiscountFinalPrice');
  var earningsEl = document.getElementById('createDiscountEarnings');
  var netRow = document.getElementById('createDiscountNetRow');
  var netEl = document.getElementById('createDiscountNet');
  var discountValueInput = document.getElementById('discount_value');
  var discountValueSuffix = document.getElementById('discount_value_suffix');
  var submitBtn = document.getElementById('createDiscountSubmit');
  var currentEmail = null;
  var currentCheckoutId = null;
  var currentEditUpdateUrl = null;
  var currentModalItems = [];
  var currentEditAutoApply = null;

  function setAutoApplyUiForMode(isEdit, autoApply) {
    var choices = document.getElementById('create_discount_auto_apply_choices');
    var locked = document.getElementById('create_discount_auto_apply_locked');
    var hint = document.getElementById('create_discount_auto_apply_hint');
    var radios = document.querySelectorAll('input[name="create_discount_auto_apply"]');
    if (isEdit) {
      currentEditAutoApply = autoApply === '1' || autoApply === 1 || autoApply === true;
      if (choices) choices.hidden = true;
      if (hint) hint.hidden = true;
      if (locked) {
        locked.hidden = false;
        locked.textContent = currentEditAutoApply
          ? 'Automatic — applied at checkout for this customer. This cannot be changed after the discount is created (it would replace the coupon in Shopify).'
          : 'Manual — customer enters the discount code. This cannot be changed after the discount is created (it would replace the coupon in Shopify).';
      }
      radios.forEach(function(r) {
        r.disabled = true;
        r.checked = (currentEditAutoApply && r.value === '1') || (!currentEditAutoApply && r.value === '0');
      });
    } else {
      currentEditAutoApply = null;
      if (choices) choices.hidden = false;
      if (hint) hint.hidden = false;
      if (locked) locked.hidden = true;
      radios.forEach(function(r) { r.disabled = false; });
    }
  }

  (function initExpiresToggle() {
    var expiresYes = document.getElementById('create_discount_expires_yes');
    var expiresNo = document.getElementById('create_discount_expires_no');
    var endsAtRow = document.getElementById('create_discount_ends_at_row');
    if (!endsAtRow) return;
    function toggle() {
      endsAtRow.style.display = (expiresYes && expiresYes.checked) ? '' : 'none';
    }
    if (expiresYes) expiresYes.addEventListener('change', toggle);
    if (expiresNo) expiresNo.addEventListener('change', toggle);
    toggle();
  })();

  function formatMoney(n) { return '$' + Number(n).toFixed(2); }

  function getTotalSale(items) {
    var t = 0;
    items.forEach(function(it) {
      var p = parseFloat(it.price) || 0;
      var q = parseInt(it.quantity, 10) || 1;
      t += p * q;
    });
    return t;
  }

  function getTotalCost(items) {
    var t = 0;
    items.forEach(function(it) {
      var c = parseFloat(it.cost) || 0;
      var q = parseInt(it.quantity, 10) || 1;
      t += c * q;
    });
    return t;
  }

  function updatePreview(items, discountType, discountVal) {
    var totalSale = getTotalSale(items);
    if (totalSale <= 0) {
      finalPriceEl.textContent = '—';
      earningsEl.textContent = '—';
      netRow.style.display = 'none';
      return 0;
    }
    var finalPrice;
    if (discountType === 'percentage') {
      var pct = parseFloat(discountVal) || 0;
      if (pct > 1) pct = pct / 100;
      finalPrice = totalSale * (1 - pct);
    } else {
      finalPrice = totalSale - (parseFloat(discountVal) || 0);
    }
    if (finalPrice < 0) finalPrice = 0;
    finalPriceEl.textContent = formatMoney(finalPrice);

    var totalCost = getTotalCost(items);
    var earnings = finalPrice - totalCost;
    earningsEl.textContent = formatMoney(earnings);

    var anyFee = document.getElementById('fee_gateway').checked || document.getElementById('fee_commission').checked ||
      document.getElementById('fee_shipping').checked || document.getElementById('fee_extra').checked;
    if (anyFee) {
      netRow.style.display = '';
      var gw = document.getElementById('fee_gateway').checked ? (finalPrice * (parseFloat(document.getElementById('fee_gateway_pct').value) || 0) / 100) : 0;
      var comm = document.getElementById('fee_commission').checked ? (parseFloat(document.getElementById('fee_commission_amt').value) || 0) : 0;
      var ship = document.getElementById('fee_shipping').checked ? (parseFloat(document.getElementById('fee_shipping_amt').value) || 0) : 0;
      var extra = document.getElementById('fee_extra').checked ? (parseFloat(document.getElementById('fee_extra_amt').value) || 0) : 0;
      var net = finalPrice - totalCost - gw - comm - ship - extra;
      netEl.textContent = formatMoney(net);
    } else {
      netRow.style.display = 'none';
    }
    return finalPrice;
  }

  function getSelectedModalItems() {
    var selected = [];
    var checkboxes = productSummaryEl.querySelectorAll('input.marketing-product-check:checked');
    checkboxes.forEach(function(cb) {
      var pid = cb.getAttribute('data-product-id');
      if (!pid) return;
      var item = currentModalItems.find(function(it) {
        var itPid = it.product_id != null ? String(it.product_id) : '';
        return itPid === pid;
      });
      if (item) selected.push(item);
    });
    return selected.length ? selected : currentModalItems;
  }

  function openModal(index, presetType, presetValue) {
    var c = window.marketingCheckouts[index];
    if (!c || (!c.email && !c.phone)) return;
    if (!currentEditUpdateUrl && c.create_discount_can === false) {
      alert(c.create_discount_reason || 'Cannot create a discount for this checkout right now.');
      return;
    }
    currentEmail = c.email && c.email.trim ? c.email.trim() : null;
    if (!currentEmail) currentEmail = null;
    currentCheckoutId = c.id != null ? c.id : null;
    document.getElementById('createDiscountModalTitle').textContent = 'Create discount for ' + (c.full_name || c.email || c.phone || 'Customer');
    if (c.email) {
      customerEl.textContent = 'Customer: ' + (c.full_name || '') + ' (' + c.email + ')';
    } else {
      customerEl.textContent = 'Customer: ' + (c.full_name || '') + ' (phone: ' + (c.phone || '') + ')';
    }
    var items;
    if (currentEditUpdateUrl && window.discountEditLineItemsByIndex && window.discountEditLineItemsByIndex[index] != null) {
      items = window.discountEditLineItemsByIndex[index];
    } else {
      items = c.line_items || [];
      var assignedIds = (window.discountAssignedProductIdsByIndex && window.discountAssignedProductIdsByIndex[index]) || [];
      if (assignedIds.length > 0 && Array.isArray(items)) {
        var assignedSet = {};
        assignedIds.forEach(function(id) { assignedSet[id] = true; });
        items = items.filter(function(it) {
          var pid = it.product_id != null ? String(it.product_id) : '';
          return pid === '' || !assignedSet[pid];
        });
      }
    }
    currentModalItems = Array.isArray(items) ? items : [];
    var productsAlreadyCovered = (c.create_discount_products_already_covered && Array.isArray(c.create_discount_products_already_covered)) ? c.create_discount_products_already_covered : [];
    var alreadyCoveredSet = {};
    productsAlreadyCovered.forEach(function(id) { alreadyCoveredSet[String(id).replace(/^gid:\/\/shopify\/Product\//, '')] = true; });
    var openOfferPidSet = {};
    (c.open_offer_product_ids || []).forEach(function(id) { openOfferPidSet[String(id).replace(/^gid:\/\/shopify\/Product\//, '')] = true; });
    var priorOrderPidSet = {};
    (c.previously_purchased_product_ids || []).forEach(function(id) { priorOrderPidSet[String(id).replace(/^gid:\/\/shopify\/Product\//, '')] = true; });

    var html = '';
    if (currentModalItems.length > 0 && !currentEditUpdateUrl) {
      var selectableCount = 0;
      currentModalItems.forEach(function(it) {
        var pid = it.product_id != null ? String(it.product_id) : '';
        var pidNorm = pid.replace(/^gid:\/\/shopify\/Product\//, '');
        var isDisabled = pidNorm !== '' && alreadyCoveredSet[pidNorm];
        if (!isDisabled) selectableCount++;
      });
      if (selectableCount > 1) {
        html += '<label class="marketing-product-select-all"><input type="checkbox" class="marketing-select-all-check" checked> Select all</label>';
      }
      currentModalItems.forEach(function(it) {
        var pid = it.product_id != null ? String(it.product_id) : '';
        var pidNorm = pid.replace(/^gid:\/\/shopify\/Product\//, '');
        var isDisabled = pidNorm !== '' && alreadyCoveredSet[pidNorm];
        var blockedByOffer = pidNorm !== '' && openOfferPidSet[pidNorm];
        var blockedByPriorOrder = pidNorm !== '' && priorOrderPidSet[pidNorm];
        var title = (it.title || 'Product').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        var qty = parseInt(it.quantity, 10) || 1;
        var cost = (it.cost != null && it.cost !== '') ? formatMoney(it.cost) : '—';
        var sale = (it.price != null && it.price !== '') ? formatMoney(it.price) : '—';
        var imgSrc = (it.image && typeof it.image === 'string' && it.image.trim() !== '') ? escapeHtml(it.image.trim()) : '';
        if (isDisabled) {
          var storyPidSet = {};
          (c.instagram_story_product_ids || []).forEach(function(id) {
            storyPidSet[String(id).replace(/^gid:\/\/shopify\/Product\//, '')] = true;
          });
          var blockedByStory = !!(c.is_instagram_story_purchase) || (pidNorm !== '' && !!storyPidSet[pidNorm]);
          var disabledNote = 'Already has an active discount for this product.';
          if (blockedByOffer) {
            disabledNote = 'Open offer on this product — manage in Offers.';
          } else if (blockedByPriorOrder) {
            disabledNote = 'Customer already ordered this product — discount blocked.';
          } else if (blockedByStory) {
            disabledNote = 'Instagram Story Purchase — use Story Purchase / NMI.';
          }
          html += '<div class="marketing-product-item-row marketing-product-item-row-disabled">' +
            (imgSrc ? '<img src="' + imgSrc + '" alt="" class="marketing-product-thumb">' : '') +
            '<span class="marketing-product-item-inner"><span class="marketing-product-disabled-note">' + disabledNote + '</span> ' +
            '<span class="item">' + title + ' × ' + qty + ' — Cost: <span class="cost">' + cost + '</span> Sale: <span class="sale">' + sale + '</span></span></span></div>';
        } else {
          html += '<label class="marketing-product-item-row">' +
            (imgSrc ? '<img src="' + imgSrc + '" alt="" class="marketing-product-thumb">' : '') +
            '<span class="marketing-product-item-inner"><input type="checkbox" class="marketing-product-check" data-product-id="' + escapeHtml(pid) + '" checked> ' +
            '<span class="item">' + title + ' × ' + qty + ' — Cost: <span class="cost">' + cost + '</span> Sale: <span class="sale">' + sale + '</span></span></span></label>';
        }
      });
    } else {
      currentModalItems.forEach(function(it) {
        var title = (it.title || 'Product').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        var qty = parseInt(it.quantity, 10) || 1;
        var cost = (it.cost != null && it.cost !== '') ? formatMoney(it.cost) : '—';
        var sale = (it.price != null && it.price !== '') ? formatMoney(it.price) : '—';
        var imgSrc = (it.image && typeof it.image === 'string' && it.image.trim() !== '') ? escapeHtml(it.image.trim()) : '';
        html += '<div class="item-row-wrap">' +
          (imgSrc ? '<img src="' + imgSrc + '" alt="" class="marketing-product-thumb">' : '') +
          '<span class="item">' + title + ' × ' + qty + ' — Cost: <span class="cost">' + cost + '</span> Sale: <span class="sale">' + sale + '</span></span></div>';
      });
    }
    productSummaryEl.innerHTML = html || '<div class="item">No products</div>';

    var selectAllCheck = productSummaryEl.querySelector('.marketing-select-all-check');
    if (!currentEditUpdateUrl && selectAllCheck) {
      selectAllCheck.addEventListener('change', function() {
        var checked = this.checked;
        productSummaryEl.querySelectorAll('.marketing-product-check').forEach(function(cb) { cb.checked = checked; });
        updatePreview(getSelectedModalItems(), document.querySelector('input[name="discount_type"]:checked').value, discountValueInput.value);
      });
      productSummaryEl.querySelectorAll('.marketing-product-check').forEach(function(cb) {
        cb.addEventListener('change', function() {
          var all = productSummaryEl.querySelectorAll('.marketing-product-check');
          var checked = productSummaryEl.querySelectorAll('.marketing-product-check:checked').length;
          var sel = productSummaryEl.querySelector('.marketing-select-all-check');
          if (sel) sel.checked = (checked === all.length);
          updatePreview(getSelectedModalItems(), document.querySelector('input[name="discount_type"]:checked').value, discountValueInput.value);
        });
      });
    }

    var discountType = presetType || 'fixed';
    var discountVal = presetValue != null && presetValue !== '' ? presetValue : '10';
    var typeRadios = document.querySelectorAll('input[name="discount_type"]');
    if (discountType === 'fixed') {
      typeRadios[1].checked = true;
      discountValueSuffix.textContent = '';
    } else {
      typeRadios[0].checked = true;
      discountValueSuffix.textContent = '%';
    }
    discountValueInput.value = discountVal;
    discountValueInput.step = '0.01';
    var itemsForPreview = currentEditUpdateUrl ? items : getSelectedModalItems();
    updatePreview(itemsForPreview, discountType, discountVal);

    var expiresYes = document.getElementById('create_discount_expires_yes');
    var expiresNo = document.getElementById('create_discount_expires_no');
    var endsAtRow = document.getElementById('create_discount_ends_at_row');
    var endsAtInput = document.getElementById('create_discount_ends_at');
    if (expiresYes && !currentEditUpdateUrl) {
      expiresYes.checked = true;
      if (endsAtInput) endsAtInput.value = defaultCouponExpiryDate();
      if (endsAtRow) endsAtRow.style.display = '';
      applyMarketingFeeDefaults();
      if (document.querySelector('input[name="create_discount_auto_apply"]')) {
        document.querySelector('input[name="create_discount_auto_apply"][value="0"]').checked = true;
      }
      setAutoApplyUiForMode(false);
    }

    modal.hidden = false;
  }

  function closeModal() {
    modal.hidden = true;
    currentEmail = null;
    currentCheckoutId = null;
    currentEditUpdateUrl = null;
    currentEditAutoApply = null;
    setAutoApplyUiForMode(false);
    submitBtn.textContent = 'Create';
  }

  function openModalForEdit(index, updateUrl, discountType, discountValue, autoApply, expires, endsAt) {
    currentEditUpdateUrl = updateUrl;
    openModal(index, discountType || 'fixed', discountValue || '10');
    document.getElementById('createDiscountModalTitle').textContent = 'Edit discount';
    submitBtn.textContent = 'Update';
    setAutoApplyUiForMode(true, autoApply);
    var expYes = document.getElementById('create_discount_expires_yes');
    var expNo = document.getElementById('create_discount_expires_no');
    var endsAtInput = document.getElementById('create_discount_ends_at');
    var endsAtRow = document.getElementById('create_discount_ends_at_row');
    if (expires === '1') {
      if (expYes) expYes.checked = true;
      if (endsAtRow) endsAtRow.style.display = '';
      if (endsAtInput && endsAt) endsAtInput.value = endsAt;
      else if (endsAtInput) endsAtInput.value = defaultCouponExpiryDate();
    } else {
      if (expNo) expNo.checked = true;
      if (endsAtRow) endsAtRow.style.display = 'none';
      if (endsAtInput) endsAtInput.value = '';
    }
  }

  var pageEl = document.querySelector('.marketing-page');
  function onCardButtonClick(e) {
    var btn = e.target.closest('.marketing-btn-hide-card');
    if (btn) {
      e.preventDefault();
      if (!confirm('Hide this card? It will no longer appear in the list.')) return;
      var url = btn.getAttribute('data-hide-url');
      if (!url) return;
      var card = btn.closest('.marketing-card');
      btn.disabled = true;
      fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }, body: JSON.stringify({}) })
        .then(function(r) { return r.json(); })
        .then(function(data) {
          if (data.success && card) {
            card.remove();
            var grid = document.querySelector('.marketing-grid');
            if (grid && !grid.querySelector('.marketing-card')) window.location.reload();
          } else if (!data.success) alert(data.message || 'Failed.');
        })
        .catch(function() { btn.disabled = false; alert('Request failed.'); });
      return;
    }
    btn = e.target.closest('.marketing-btn-create-discount');
    if (btn) { e.preventDefault(); currentEditUpdateUrl = null; submitBtn.textContent = 'Create'; openModal(parseInt(btn.getAttribute('data-index'), 10)); return; }
    btn = e.target.closest('.marketing-btn-edit-discount');
    if (btn) {
      e.preventDefault();
      openModalForEdit(
        parseInt(btn.getAttribute('data-index'), 10),
        btn.getAttribute('data-update-url'),
        btn.getAttribute('data-discount-type'),
        btn.getAttribute('data-discount-value'),
        btn.getAttribute('data-auto-apply'),
        btn.getAttribute('data-expires'),
        btn.getAttribute('data-ends-at')
      );
      return;
    }
    btn = e.target.closest('.marketing-btn-delete-discount');
    if (btn) {
      e.preventDefault();
      if (!confirm('Delete this discount? The code will be deactivated in Shopify and removed from this card. You can create a new one after.')) return;
      var url = btn.getAttribute('data-delete-url');
      fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }, body: JSON.stringify({}) })
        .then(function(r) { return r.json(); })
        .then(function(data) { if (data.success) window.location.reload(); else alert(data.message || 'Failed.'); })
        .catch(function() { alert('Request failed.'); });
      return;
    }
    btn = e.target.closest('.marketing-btn-notify-customer');
    if (btn) {
      e.preventDefault();
      var sendEmailUrl = btn.getAttribute('data-send-email-url') || '';
      var sendSmsUrl = btn.getAttribute('data-send-sms-url') || '';
      var hasEmail = btn.getAttribute('data-has-email') === '1';
      var hasPhone = btn.getAttribute('data-has-phone') === '1';
      var emailSentDate = btn.getAttribute('data-email-sent-date') || '';
      var emailSentFormatted = btn.getAttribute('data-email-sent-formatted') || '';
      var smsSentDate = btn.getAttribute('data-sms-sent-date') || '';
      var smsSentFormatted = btn.getAttribute('data-sms-sent-formatted') || '';
      var pageEl = document.querySelector('.marketing-page');
      var today = (pageEl && pageEl.dataset.today) ? pageEl.dataset.today : '';

      if (!hasEmail && !hasPhone) return;

      function doSendEmailOnly() {
        if (!sendEmailUrl) return;
        btn.disabled = true;
        fetch(sendEmailUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }, body: JSON.stringify({}) })
          .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
          .then(function(_r) {
            btn.disabled = false;
            if (_r.ok && _r.data.success) { alert(_r.data.message || 'Email sent successfully.'); window.location.reload(); }
            else { alert(_r.data.message || 'Failed to send email.'); }
          })
          .catch(function() { btn.disabled = false; alert('Request failed.'); });
      }
      function doSendSmsOnly() {
        if (!sendSmsUrl) return;
        btn.disabled = true;
        fetch(sendSmsUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }, body: JSON.stringify({}) })
          .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
          .then(function(_r) {
            btn.disabled = false;
            if (_r.ok && _r.data.success) { alert(_r.data.message || 'SMS sent successfully.'); window.location.reload(); }
            else { alert(_r.data.message || 'Failed to send SMS.'); }
          })
          .catch(function() { btn.disabled = false; alert('Request failed.'); });
      }

      if (hasEmail && !hasPhone) {
        if (!sendEmailUrl) return;
        if (emailSentDate && emailSentDate === today) {
          window._marketingPendingSend = doSendEmailOnly;
          showAlreadySentModal('Email was last sent on ' + (emailSentFormatted || emailSentDate) + '.');
          return;
        }
        doSendEmailOnly();
        return;
      }
      if (!hasEmail && hasPhone) {
        if (!sendSmsUrl) return;
        if (smsSentDate && smsSentDate === today) {
          window._marketingPendingSend = doSendSmsOnly;
          showAlreadySentModal('SMS was last sent on ' + (smsSentFormatted || smsSentDate) + '.');
          return;
        }
        doSendSmsOnly();
        return;
      }
      if (hasEmail && hasPhone) {
        var notifyModal = document.getElementById('notifyCustomerModal');
        if (!notifyModal) return;
        notifyModal.dataset.pendingSendEmailUrl = sendEmailUrl;
        notifyModal.dataset.pendingSendSmsUrl = sendSmsUrl;
        notifyModal.dataset.pendingEmailSentDate = emailSentDate;
        notifyModal.dataset.pendingEmailSentFormatted = emailSentFormatted;
        notifyModal.dataset.pendingSmsSentDate = smsSentDate;
        notifyModal.dataset.pendingSmsSentFormatted = smsSentFormatted;
        notifyModal.hidden = false;
      }
    }
  }
  if (pageEl) pageEl.addEventListener('click', onCardButtonClick);

  function escapeHtml(s) {
    var div = document.createElement('div');
    div.textContent = s;
    return div.innerHTML;
  }
  document.querySelector('input[name="discount_type"]').closest('.marketing-radio-group').addEventListener('change', function() {
    var isPct = document.querySelector('input[name="discount_type"]:checked').value === 'percentage';
    discountValueInput.min = isPct ? '0' : '0';
    discountValueInput.step = isPct ? '0.01' : '0.01';
    discountValueSuffix.textContent = isPct ? '%' : '';
    if (!currentEmail && !currentCheckoutId) return;
    var items = currentEditUpdateUrl ? currentModalItems : getSelectedModalItems();
    if (items && items.length) updatePreview(items, isPct ? 'percentage' : 'fixed', discountValueInput.value);
  });

  discountValueInput.addEventListener('input', function() {
    if (!currentEmail && !currentCheckoutId) return;
    var items = currentEditUpdateUrl ? currentModalItems : getSelectedModalItems();
    if (items && items.length) updatePreview(items, document.querySelector('input[name="discount_type"]:checked').value, this.value);
  });

  ['fee_gateway','fee_commission','fee_shipping','fee_extra'].forEach(function(id) {
    var cb = document.getElementById(id);
    var input = document.getElementById(id === 'fee_gateway' ? 'fee_gateway_pct' : id === 'fee_commission' ? 'fee_commission_amt' : id === 'fee_shipping' ? 'fee_shipping_amt' : 'fee_extra_amt');
    function refreshFeesPreview() {
      if (!currentEmail && !currentCheckoutId) return;
      var items = currentEditUpdateUrl ? currentModalItems : getSelectedModalItems();
      if (items && items.length) updatePreview(items, document.querySelector('input[name="discount_type"]:checked').value, discountValueInput.value);
    }
    cb.addEventListener('change', function() { input.disabled = !this.checked; refreshFeesPreview(); });
    input.addEventListener('input', refreshFeesPreview);
  });

  modal.querySelector('.marketing-modal-backdrop').addEventListener('click', closeModal);
  modal.querySelector('.marketing-modal-close').addEventListener('click', closeModal);
  modal.querySelector('.marketing-modal-btn-cancel').addEventListener('click', closeModal);

  var notifyModalEl = document.getElementById('notifyCustomerModal');
  function closeNotifyModal() {
    if (notifyModalEl) notifyModalEl.hidden = true;
  }
  if (notifyModalEl) {
    notifyModalEl.querySelector('.marketing-modal-backdrop').addEventListener('click', closeNotifyModal);
    var closeBtns = notifyModalEl.querySelectorAll('.marketing-notify-modal-close, .marketing-modal-btn-cancel');
    closeBtns.forEach(function(b) { b.addEventListener('click', closeNotifyModal); });
  }

  var alreadySentModalEl = document.getElementById('notificationAlreadySentModal');
  var alreadySentMessageEl = document.getElementById('notificationAlreadySentMessage');
  function showAlreadySentModal(message) {
    if (alreadySentMessageEl) alreadySentMessageEl.textContent = message;
    if (alreadySentModalEl) alreadySentModalEl.hidden = false;
  }
  function closeAlreadySentModal() {
    if (alreadySentModalEl) alreadySentModalEl.hidden = true;
    window._marketingPendingSend = null;
  }
  if (alreadySentModalEl) {
    alreadySentModalEl.querySelector('.marketing-modal-backdrop').addEventListener('click', closeAlreadySentModal);
    var alreadySentCloseBtns = alreadySentModalEl.querySelectorAll('.notification-already-sent-close');
    alreadySentCloseBtns.forEach(function(b) { b.addEventListener('click', closeAlreadySentModal); });
  }
  var sendAnywayBtn = document.getElementById('notificationAlreadySentSendAnyway');
  if (sendAnywayBtn) {
    sendAnywayBtn.addEventListener('click', function() {
      if (typeof window._marketingPendingSend === 'function') {
        window._marketingPendingSend();
        window._marketingPendingSend = null;
      }
      closeAlreadySentModal();
    });
  }

  var notifySendBtn = document.getElementById('notifyCustomerSendBtn');
  if (notifySendBtn) {
    notifySendBtn.addEventListener('click', function() {
      var m = document.getElementById('notifyCustomerModal');
      if (!m || m.hidden) return;
      var emailUrl = m.dataset.pendingSendEmailUrl || '';
      var smsUrl = m.dataset.pendingSendSmsUrl || '';
      var channel = (document.querySelector('input[name="notify_channel"]:checked') || {}).value || 'both';
      var emailSentDate = m.dataset.pendingEmailSentDate || '';
      var emailSentFormatted = m.dataset.pendingEmailSentFormatted || '';
      var smsSentDate = m.dataset.pendingSmsSentDate || '';
      var smsSentFormatted = m.dataset.pendingSmsSentFormatted || '';
      var pageEl = document.querySelector('.marketing-page');
      var today = (pageEl && pageEl.dataset.today) ? pageEl.dataset.today : '';

      var sendEmail = (channel === 'email' || channel === 'both') && emailUrl;
      var sendSms = (channel === 'sms' || channel === 'both') && smsUrl;
      var emailSentToday = sendEmail && emailSentDate && emailSentDate === today;
      var smsSentToday = sendSms && smsSentDate && smsSentDate === today;

      if (emailSentToday || smsSentToday) {
        var parts = [];
        if (emailSentToday) parts.push('Email was last sent on ' + (emailSentFormatted || emailSentDate) + '.');
        if (smsSentToday) parts.push('SMS was last sent on ' + (smsSentFormatted || smsSentDate) + '.');
        window._marketingPendingSend = function() {
          closeNotifyModal();
          doNotifyModalSend(emailUrl, smsUrl, channel, notifySendBtn);
        };
        showAlreadySentModal(parts.join(' '));
        return;
      }

      closeNotifyModal();
      doNotifyModalSend(emailUrl, smsUrl, channel, notifySendBtn);
    });
  }
  function doNotifyModalSend(emailUrl, smsUrl, channel, sendBtn) {
    var csrf = document.querySelector('meta[name="csrf-token"]');
    var token = csrf ? csrf.content : '';
    var headers = { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token, 'Accept': 'application/json' };
    sendBtn.disabled = true;
    function doSend(url) {
      return fetch(url, { method: 'POST', headers: headers, body: JSON.stringify({}) })
        .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); });
    }
    var promises = [];
    if ((channel === 'email' || channel === 'both') && emailUrl) promises.push(doSend(emailUrl));
    if ((channel === 'sms' || channel === 'both') && smsUrl) promises.push(doSend(smsUrl));
    if (promises.length === 0) {
      sendBtn.disabled = false;
      return;
    }
    Promise.all(promises).then(function(results) {
      var allOk = results.every(function(r) { return r.ok && r.data && r.data.success; });
      sendBtn.disabled = false;
      if (allOk) {
        alert(channel === 'both' ? 'Notifications sent successfully.' : (channel === 'email' ? 'Email sent successfully.' : 'SMS sent successfully.'));
        window.location.reload();
      } else {
        var msg = results.map(function(r) { return r.data && r.data.message ? r.data.message : 'Request failed'; }).join(' ');
        alert(msg || 'One or more notifications failed.');
      }
    }).catch(function() {
      sendBtn.disabled = false;
      alert('Request failed.');
    });
  }

  submitBtn.addEventListener('click', function() {
    var discountType = document.querySelector('input[name="discount_type"]:checked').value;
    var discountVal = discountValueInput.value;
    if (!discountVal || (discountType === 'percentage' && (parseFloat(discountVal) <= 0 || parseFloat(discountVal) > 100))) {
      alert('Please enter a valid discount value.');
      return;
    }
    if (discountType === 'fixed' && (parseFloat(discountVal) < 0 || isNaN(parseFloat(discountVal)))) {
      alert('Please enter a valid fixed amount.');
      return;
    }
    submitBtn.disabled = true;
    if (currentEditUpdateUrl) {
      var editBody = { discount_type: discountType, discount_value: discountVal };
      editBody.auto_apply = currentEditAutoApply === true;
      var expiresRadio = document.querySelector('input[name="create_discount_expires"]:checked');
      var expires = expiresRadio ? expiresRadio.value === '1' : true;
      editBody.expires = expires;
      if (expires) {
        var endsAtEl = document.getElementById('create_discount_ends_at');
        if (endsAtEl && endsAtEl.value) editBody.ends_at = endsAtEl.value;
      }
      fetch(currentEditUpdateUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
        body: JSON.stringify(editBody)
      })
      .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
      .then(function(_r) {
        submitBtn.disabled = false;
        if (_r.ok && _r.data.success) { alert('Discount updated.'); closeModal(); window.location.reload(); }
        else { alert(_r.data.message || 'Failed to update.'); }
      })
      .catch(function() { submitBtn.disabled = false; alert('Request failed.'); });
      return;
    }
    if (!currentEmail && !currentCheckoutId) { submitBtn.disabled = false; return; }
    var productIds = [];
    if (!currentEditUpdateUrl && productSummaryEl.querySelectorAll('.marketing-product-check').length > 0) {
      productSummaryEl.querySelectorAll('.marketing-product-check:checked').forEach(function(cb) {
        var pid = cb.getAttribute('data-product-id');
        if (pid) productIds.push(pid);
      });
      if (productIds.length === 0) {
        alert('Select at least one product for the discount.');
        submitBtn.disabled = false;
        return;
      }
    }
    var body = { discount_type: discountType, discount_value: discountVal };
    if (currentEmail) body.email = currentEmail;
    else if (currentCheckoutId) body.abandoned_checkout_id = currentCheckoutId;
    if (productIds.length > 0) body.product_ids = productIds;
    var autoApplyRadio = document.querySelector('#createDiscountModal input[name="create_discount_auto_apply"]:checked');
    body.auto_apply = autoApplyRadio ? (autoApplyRadio.value === '1') : false;
    var expiresRadio = document.querySelector('input[name="create_discount_expires"]:checked');
    var expires = expiresRadio ? expiresRadio.value === '1' : true;
    body.expires = expires;
    if (expires) {
      var endsAtEl = document.getElementById('create_discount_ends_at');
      if (endsAtEl && endsAtEl.value) body.ends_at = endsAtEl.value;
    }
    fetch('{{ route("marketing.create-discount") }}', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
      body: JSON.stringify(body)
    })
    .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
    .then(function(_r) {
      submitBtn.disabled = false;
      if (_r.ok && _r.data.success) {
        var msg = (_r.data.code && _r.data.code.trim() !== '') ? ('Discount code created: ' + _r.data.code) : 'Discount created. It will be applied automatically at checkout.';
        alert(msg);
        closeModal();
        var url = new URL(window.location.href);
        url.searchParams.set('discounts_used', 'unused');
        window.location.href = url.toString();
      } else {
        alert(_r.data.message || 'Failed to create discount.');
      }
    })
    .catch(function() { submitBtn.disabled = false; alert('Request failed.'); });
  });
})();
</script>
@endpush
@endif

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  var modal = document.getElementById('editFeesModal');
  if (!modal) return;
  var currentCard = null;

  function findCard(el) {
    while (el && el !== document.body) {
      if (el.classList && el.classList.contains('marketing-card')) return el;
      el = el.parentElement;
    }
    return null;
  }
  function findLink(el) {
    while (el && el !== document.body) {
      if (el.classList && el.classList.contains('marketing-link-edit-fees')) return el;
      el = el.parentElement;
    }
    return null;
  }
  function getFees() {
    var v = function(id) { var el = document.getElementById(id); return el ? (parseFloat(el.value) || 0) : 0; };
    var gw = document.getElementById('edit_fee_gateway');
    var comm = document.getElementById('edit_fee_commission');
    var ship = document.getElementById('edit_fee_shipping');
    var extra = document.getElementById('edit_fee_extra');
    return {
      gwPct: (gw && gw.checked) ? v('edit_fee_gateway_pct') : 0,
      comm: (comm && comm.checked) ? v('edit_fee_commission_amt') : 0,
      ship: (ship && ship.checked) ? v('edit_fee_shipping_amt') : 0,
      extra: (extra && extra.checked) ? v('edit_fee_extra_amt') : 0
    };
  }
  function getFeeCalcJson() {
    if (!currentCard) return null;
    var jsonEl = currentCard.querySelector('.marketing-fee-calc-json');
    if (jsonEl && jsonEl.textContent) return jsonEl.textContent.trim();
    var block = currentCard.querySelector('.marketing-card-discount');
    var raw = block ? block.getAttribute('data-fee-calc') : null;
    if (raw && raw.indexOf('&quot;') !== -1) raw = raw.replace(/&quot;/g, '"');
    return raw;
  }
  function updateProfit() {
    var resultEl = document.getElementById('editFeesResultTotal');
    if (!resultEl) return;
    if (!currentCard) { resultEl.textContent = '—'; return; }
    var raw = getFeeCalcJson();
    if (!raw) {
      copyProfitFromCard(resultEl);
      return;
    }
    var items;
    try { items = JSON.parse(raw); } catch (e) {
      copyProfitFromCard(resultEl);
      return;
    }
    if (!items || !items.length) {
      copyProfitFromCard(resultEl);
      return;
    }
    var fees = getFees();
    var total = 0;
    var spans = currentCard.querySelectorAll('.marketing-price-profit-fees');
    for (var i = 0; i < items.length; i++) {
      var it = items[i];
      var net = it.gross - (it.final * fees.gwPct / 100) - (fees.comm * it.share) - (fees.ship * it.share) - (fees.extra * it.share);
      total += net;
      if (spans[i]) spans[i].textContent = 'Profit (after fees): $' + net.toFixed(2);
    }
    resultEl.textContent = '$' + total.toFixed(2);
  }
  function copyProfitFromCard(resultEl) {
    if (!currentCard || !resultEl) return;
    var spans = currentCard.querySelectorAll('.marketing-price-profit-fees');
    if (spans.length && spans[0].textContent) {
      var t = spans[0].textContent;
      var idx = t.indexOf('$');
      resultEl.textContent = idx >= 0 ? t.substring(idx) : t;
    } else {
      resultEl.textContent = '—';
    }
  }
  function showModal() {
    modal.removeAttribute('hidden');
    if (currentCard) copyProfitFromCard(document.getElementById('editFeesResultTotal'));
    updateProfit();
  }
  function hideModal() {
    modal.setAttribute('hidden', '');
    currentCard = null;
  }

  document.body.addEventListener('click', function(e) {
    var link = findLink(e.target);
    if (!link) return;
    e.preventDefault();
    e.stopPropagation();
    var card = findCard(link);
    if (!card) return;
    currentCard = card;
    showModal();
  });

  var btnUpdate = document.getElementById('editFeesApplyBtn');
  if (btnUpdate) btnUpdate.addEventListener('click', function(e) { e.preventDefault(); updateProfit(); hideModal(); });
  var btnClose = modal.querySelector('.marketing-modal-close');
  var btnCloseFees = modal.querySelector('.marketing-modal-btn-close-fees');
  var back = modal.querySelector('.marketing-modal-backdrop');
  if (btnClose) btnClose.addEventListener('click', hideModal);
  if (btnCloseFees) btnCloseFees.addEventListener('click', hideModal);
  if (back) back.addEventListener('click', hideModal);

  [['edit_fee_gateway','edit_fee_gateway_pct'],['edit_fee_commission','edit_fee_commission_amt'],['edit_fee_shipping','edit_fee_shipping_amt'],['edit_fee_extra','edit_fee_extra_amt']].forEach(function(p) {
    var cb = document.getElementById(p[0]);
    var inp = document.getElementById(p[1]);
    if (!cb || !inp) return;
    cb.addEventListener('change', function() { inp.disabled = !cb.checked; updateProfit(); });
    inp.addEventListener('input', updateProfit);
    inp.addEventListener('change', updateProfit);
  });
  var exCb = document.getElementById('edit_fee_extra');
  var exInp = document.getElementById('edit_fee_extra_amt');
  if (exInp) exInp.disabled = !(exCb && exCb.checked);
});
</script>
@endpush
@endsection