@extends('store.layout.main')

@section('page-header')
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <div class="page-pretitle">Manage</div>
                <h2 class="page-title">Discounts & Coupons</h2>
            </div>
            <div class="col-auto ms-auto">
                <button class="btn btn-primary" id="addItemBtn" data-bs-toggle="modal" data-bs-target="#addModal">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M12 5l0 14"/><path d="M5 12l14 0"/>
                    </svg>
                    <span id="addItemBtnLabel">Add Discount</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('main-container')
@php
    $productOptionsJson  = $products->map(fn ($p) => ['id' => (int) $p->id, 'name' => (string) $p->name])->values();
    $categoryOptionsJson = $categories->map(fn ($c) => ['id' => (int) $c->id, 'name' => (string) (($c->parent_id ? '— ' : '') . $c->name)])->values();
@endphp

<div class="card">
    <div class="card-header">
        <div class="d-flex align-items-center gap-2 w-100">
            <button type="button" id="tabBtnDiscounts" class="btn btn-sm btn-primary tab-btn" data-tab="discounts">
                Discounts (<span id="discountCountBadge">{{ $discountOnlyCount }}</span>)
            </button>
            <button type="button" id="tabBtnCoupons" class="btn btn-sm btn-outline-primary tab-btn" data-tab="coupons">
                Coupons (<span id="couponCountBadge">{{ $couponCount }}</span>)
            </button>
        </div>
    </div>

    {{-- ═══════════════════ DISCOUNTS PANEL ═══════════════════ --}}
    <div id="panelDiscounts">
        <div class="card-table table-responsive">
            <table class="table table-vcenter">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                        <th>Applies To</th>
                        <th>Period</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="tbodyDiscounts">
                @forelse($discountItems as $d)
                @php
                    $isActive    = $d->is_active;
                    $now         = now()->startOfDay();
                    $expired     = $d->end_date && $d->end_date->lt($now);
                    $targetPids  = array_map('intval', (array) ($d->target_product_ids ?? []));
                    $targetCids  = array_map('intval', (array) ($d->target_category_ids ?? []));
                    $pNames      = !empty($targetPids) ? $products->whereIn('id', $targetPids)->pluck('name')->values() : collect();
                    $cNames      = !empty($targetCids) ? $categories->whereIn('id', $targetCids)->map(fn ($c) => ($c->parent_id ? '— ' : '') . $c->name)->values() : collect();
                @endphp
                <tr class="{{ $expired ? 'opacity-50' : '' }}" id="discount-row-{{ $d->id }}">
                    <td>
                        <div class="fw-bold">{{ $d->name }}</div>
                        <div class="d-badges">
                            <span class="badge bg-{{ $d->discount_type === 'percentage' ? 'blue' : 'green' }}-lt text-{{ $d->discount_type === 'percentage' ? 'blue' : 'green' }}">{{ $d->discount_type === 'percentage' ? 'Percentage' : 'Fixed' }}</span>
                            @if($isActive && !$expired)
                                <span class="badge bg-success-lt text-success">Active</span>
                            @elseif($expired)
                                <span class="badge bg-secondary-lt text-secondary">Expired</span>
                            @else
                                <span class="badge bg-danger-lt text-danger">Inactive</span>
                            @endif
                            @if($d->new_customers_only)
                                <span class="badge bg-purple-lt text-purple">New Customers</span>
                            @endif
                        </div>
                    </td>
                    <td class="fw-bold">
                        {{ $d->discount_type === 'percentage' ? $d->value . '%' : format_currency($d->value) . ' off' }}
                    </td>
                    <td class="small">
                        @if($pNames->count() === 1)
                            <span class="text-muted">Product:</span> {{ $pNames->first() }}
                        @elseif($pNames->count() === 2)
                            <span class="text-muted">Products:</span> {{ $pNames->implode(', ') }}
                        @elseif($pNames->count() >= 3)
                            <span class="text-muted">Products:</span> {{ count($targetPids) }} selected
                            <div class="mt-1"><button type="button" class="btn btn-xs btn-outline-primary js-discount-detail" data-title="Selected Products" data-items='@json($pNames)'>View</button></div>
                        @elseif($cNames->count() === 1)
                            <span class="text-muted">Category:</span> {{ $cNames->first() }}
                        @elseif($cNames->count() === 2)
                            <span class="text-muted">Categories:</span> {{ $cNames->implode(', ') }}
                        @elseif($cNames->count() >= 3)
                            <span class="text-muted">Categories:</span> {{ count($targetCids) }} selected
                            <div class="mt-1"><button type="button" class="btn btn-xs btn-outline-primary js-discount-detail" data-title="Selected Categories" data-items='@json($cNames)'>View</button></div>
                        @elseif($d->target_product_tag)
                            <span class="badge bg-azure-lt text-azure">Tag: {{ $d->target_product_tag }}</span>
                        @elseif($d->product)
                            <span class="text-muted">Product:</span> {{ $d->product->name }}
                        @elseif($d->category)
                            <span class="text-muted">Category:</span> {{ $d->category->name }}
                        @else
                            <span class="badge bg-indigo-lt text-indigo">All Products</span>
                        @endif
                    </td>
                    <td class="small">
                        <div class="d-badges">
                            @if($d->start_date)
                                <span class="badge bg-cyan-lt text-cyan">From {{ $d->start_date->format('d M Y') }}</span>
                            @endif
                            @if($d->end_date)
                                <span class="badge bg-orange-lt text-orange">Expires {{ $d->end_date->format('d M Y') }}</span>
                            @else
                                <span class="text-muted fst-italic">No expiry</span>
                            @endif
                        </div>
                        <div class="text-muted mt-1">Created: {{ $d->created_at->format('d M Y') }}@if($d->creator) by {{ $d->creator->name }}@endif</div>
                    </td>
                    <td class="text-end">
                        <div class="d-inline-flex align-items-center gap-2">
                            <label class="form-check form-switch m-0">
                                <input class="form-check-input js-discount-toggle" type="checkbox"
                                       data-url="{{ route('store.discounts.toggle', $d->id) }}"
                                       {{ $isActive ? 'checked' : '' }}>
                            </label>
                            <button type="button" class="btn btn-sm btn-warning js-discount-edit"
                                    data-discount='@json($d)'>
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger js-discount-delete"
                                    data-id="{{ $d->id }}"
                                    data-url="{{ route('store.discounts.destroy', $d->id) }}"
                                    data-name="{{ $d->name }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr id="discountsEmptyRow">
                    <td colspan="5" class="text-center text-muted py-4">No discounts yet. Click "Add Discount" to create one.</td>
                </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($discountItems->hasPages())
        <div class="card-footer d-flex align-items-center">{{ $discountItems->links() }}</div>
        @endif
    </div>

    {{-- ═══════════════════ COUPONS PANEL ═══════════════════ --}}
    <div id="panelCoupons" style="display:none">
        <div class="card-table table-responsive">
            <table class="table table-vcenter">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Code / Value</th>
                        <th>Policy</th>
                        <th>Period</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="tbodyCoupons">
                @forelse($couponItems as $d)
                @php
                    $isActive  = $d->is_active;
                    $now       = now()->startOfDay();
                    $expired   = $d->end_date && $d->end_date->lt($now);
                    $audLabel  = match($d->audience_rule ?? 'all') {
                        'new'       => 'New customers',
                        'basic'     => 'Basic tier',
                        'golden'    => 'Golden tier',
                        'package'   => 'Package tier',
                        'orders_gt' => 'Orders > ' . (int) ($d->order_count_value ?? 0),
                        'orders_lt' => 'Orders < ' . (int) ($d->order_count_value ?? 0),
                        default     => 'All customers',
                    };
                    $usageRows = collect($d->couponUsages ?? [])->map(fn ($u) => [
                        'customer' => trim(($u->customer->name ?? 'Unknown') . (!empty($u->customer?->email) ? ' <'.$u->customer->email.'>' : '')),
                        'used_at'  => optional($u->created_at)->format('d M Y h:i A'),
                    ])->filter(fn ($r) => !empty($r['customer']))->values();
                @endphp
                <tr class="{{ $expired ? 'opacity-50' : '' }}" id="discount-row-{{ $d->id }}">
                    <td>
                        <div class="fw-bold">{{ $d->name }}</div>
                        <div class="d-badges">
                            <span class="badge bg-{{ $d->discount_type === 'percentage' ? 'blue' : 'green' }}-lt text-{{ $d->discount_type === 'percentage' ? 'blue' : 'green' }}">{{ $d->discount_type === 'percentage' ? 'Percentage' : 'Fixed' }}</span>
                            @if($isActive && !$expired)
                                <span class="badge bg-success-lt text-success">Active</span>
                            @elseif($expired)
                                <span class="badge bg-secondary-lt text-secondary">Expired</span>
                            @else
                                <span class="badge bg-danger-lt text-danger">Inactive</span>
                            @endif
                            @if($d->new_customers_only)
                                <span class="badge bg-purple-lt text-purple">New Customers</span>
                            @endif
                        </div>
                    </td>
                    <td>
                        <div class="coupon-code-cell">
                            <span class="coupon-code-text font-monospace">{{ $d->coupon_code }}</span>
                            <button type="button" class="coupon-copy-btn js-copy-code"
                                    data-code="{{ $d->coupon_code }}"
                                    title="Copy code">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                            </button>
                        </div>
                        <div class="coupon-value-text">
                            {{ $d->discount_type === 'percentage' ? $d->value . '%' : format_currency($d->value) }} OFF
                        </div>
                    </td>
                    <td class="small">
                        <div><strong>Used:</strong> {{ (int) ($d->coupon_used_count ?? 0) }}</div>
                        <div><strong>Per customer:</strong> {{ $d->max_uses_per_customer ?: '∞' }}</div>
                        <div><strong>Audience:</strong> {{ $audLabel }}</div>
                        @if($usageRows->isNotEmpty())
                        <div class="mt-1">
                            <button type="button" class="btn btn-xs btn-outline-primary js-coupon-usage-detail"
                                    data-title="Usage History" data-items='@json($usageRows)'>
                                View Usage
                            </button>
                        </div>
                        @endif
                    </td>
                    <td class="small">
                        <div class="d-badges">
                            @if($d->start_date)
                                <span class="badge bg-cyan-lt text-cyan">From {{ $d->start_date->format('d M Y') }}</span>
                            @endif
                            @if($d->end_date)
                                <span class="badge bg-orange-lt text-orange">Expires {{ $d->end_date->format('d M Y') }}</span>
                            @else
                                <span class="text-muted fst-italic">No expiry</span>
                            @endif
                        </div>
                        <div class="text-muted mt-1">Created: {{ $d->created_at->format('d M Y') }}@if($d->creator) by {{ $d->creator->name }}@endif</div>
                    </td>
                    <td class="text-end">
                        <div class="d-inline-flex align-items-center gap-2">
                            <label class="form-check form-switch m-0">
                                <input class="form-check-input js-discount-toggle" type="checkbox"
                                       data-url="{{ route('store.discounts.toggle', $d->id) }}"
                                       {{ $isActive ? 'checked' : '' }}>
                            </label>
                            <button type="button" class="btn btn-sm btn-warning js-discount-edit"
                                    data-discount='@json($d)'>
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger js-discount-delete"
                                    data-id="{{ $d->id }}"
                                    data-url="{{ route('store.discounts.destroy', $d->id) }}"
                                    data-name="{{ $d->name }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr id="couponsEmptyRow">
                    <td colspan="5" class="text-center text-muted py-4">No coupons yet. Switch to "Coupons" and click "Add Coupon".</td>
                </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($couponItems->hasPages())
        <div class="card-footer d-flex align-items-center">{{ $couponItems->links() }}</div>
        @endif
    </div>
</div>

{{-- ══════════════════════════════════════
     ADD MODAL (unified — adapts to tab)
══════════════════════════════════════ --}}
<div class="modal modal-blur fade" id="addModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="addDiscountForm" action="{{ route('store.discounts.store') }}" method="POST">
                @csrf
                <input type="hidden" name="is_coupon" id="addIsCoupon" value="0">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalTitle">Add Discount</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        {{-- Row 1: Value | Type | Name --}}
                        <div class="col-md-4">
                            <label class="form-label required">Value</label>
                            <div class="input-group">
                                <span class="input-group-text js-value-prefix">{{ $currencySymbol }}</span>
                                <input type="number" name="value" class="form-control" required min="0.01" step="0.01" placeholder="e.g. 10">
                                <span class="input-group-text js-value-suffix d-none">%</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Type</label>
                            <select name="discount_type" class="form-select js-discount-type" required>
                                <option value="percentage">Percentage (%)</option>
                                <option value="fixed">Fixed Amount</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Name</label>
                            <input type="text" name="name" class="form-control js-auto-name" required maxlength="100" placeholder="e.g. 10% off">
                        </div>

                        {{-- Row 2: (Applies To -or- Coupon Code) | Start Date | End Date --}}
                        <div class="col-md-4 add-discount-only">
                            <label class="form-label required">Applies To</label>
                            <select name="scope" class="form-select add-scope-select" required>
                                <option value="all">All Products</option>
                                <option value="product">Specific Product</option>
                                <option value="products">Multiple Products</option>
                                <option value="category">Specific Category</option>
                                <option value="categories">Multiple Categories</option>
                                <option value="tag">Product Tag</option>
                            </select>
                        </div>
                        <div class="col-md-4 add-coupon-only d-none">
                            <label class="form-label required">Coupon Code {!! tooltip('Customer enters this at checkout, e.g. SAVE10.') !!}</label>
                            <input type="text" name="coupon_code" class="form-control text-uppercase font-monospace" placeholder="SAVE10" maxlength="50">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Start Date</label>
                            <input type="date" name="start_date" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">End Date {!! tooltip('Leave empty for no expiry.') !!}</label>
                            <input type="date" name="end_date" class="form-control">
                        </div>

                        {{-- Scope-specific pickers (full width, shown conditionally) --}}
                        <div class="col-12 add-scope-product add-discount-only d-none">
                            <label class="form-label required">Product</label>
                            <select name="store_product_id" class="form-select">
                                <option value="">— Select Product —</option>
                                @foreach($products as $p)
                                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 add-scope-category add-discount-only d-none">
                            <label class="form-label required">Category</label>
                            <select name="store_category_id" class="form-select">
                                <option value="">— Select Category —</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->parent_id ? '— ' : '' }}{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 add-scope-products add-discount-only d-none">
                            <label class="form-label">Products</label>
                            <div id="addProductsPicker" class="js-token-picker" data-name="store_product_ids[]" data-placeholder="Search products…" data-selected='[]'></div>
                        </div>
                        <div class="col-12 add-scope-categories add-discount-only d-none">
                            <label class="form-label">Categories</label>
                            <div id="addCategoriesPicker" class="js-token-picker" data-name="store_category_ids[]" data-placeholder="Search categories…" data-selected='[]'></div>
                        </div>
                        <div class="col-md-4 add-scope-tag add-discount-only d-none">
                            <label class="form-label">Product Tag</label>
                            <input type="text" class="form-control" name="target_product_tag" placeholder="e.g. new-arrival">
                        </div>

                        {{-- Row 3 discount: New customers only --}}
                        <div class="col-md-4 add-discount-only">
                            <label class="form-check mt-1 cursor-pointer">
                                <input type="checkbox" class="form-check-input" name="new_customers_only" value="1">
                                <span class="form-check-label">
                                    New customers only
                                    {!! tooltip('Applies only to customers placing their first order.') !!}
                                </span>
                            </label>
                        </div>

                        {{-- Row 3 coupon: Max Uses | Max Unique | Audience --}}
                        <div class="col-md-4 add-coupon-only d-none">
                            <label class="form-label">Max Uses / Customer {!! tooltip('Leave empty for unlimited.') !!}</label>
                            <input type="number" min="1" step="1" name="max_uses_per_customer" class="form-control" placeholder="Unlimited">
                        </div>
                        <div class="col-md-4 add-coupon-only d-none">
                            <label class="form-label">Max Unique Customers {!! tooltip('Total distinct customers allowed.') !!}</label>
                            <input type="number" min="1" step="1" name="max_unique_customers" class="form-control" placeholder="Unlimited">
                        </div>
                        <div class="col-md-4 add-coupon-only d-none">
                            <label class="form-label">Audience</label>
                            <select name="audience_rule" class="form-select js-audience-rule">
                                <option value="all">All customers</option>
                                <option value="new">New customers only</option>
                                <option value="basic">Basic customers</option>
                                <option value="golden">Golden customers</option>
                                <option value="package">Package customers</option>
                                <option value="orders_gt">Orders greater than…</option>
                                <option value="orders_lt">Orders less than…</option>
                            </select>
                        </div>
                        <div class="col-md-4 add-coupon-only js-order-threshold d-none">
                            <label class="form-label">Order Count</label>
                            <input type="number" min="1" step="1" name="order_count_value" class="form-control" placeholder="e.g. 5">
                        </div>

                        {{-- Coupon explanation --}}
                        <div class="col-12 add-coupon-only d-none">
                            <div class="alert alert-info alert-dismissible mb-0 py-2 px-3" style="font-size:.82rem;line-height:1.55;">
                                <strong>How coupons work:</strong>
                                The customer enters this code at checkout to receive the discount.
                                <strong>Max Uses / Customer</strong> limits how many times a single customer can redeem it (leave empty for unlimited).
                                <strong>Max Unique Customers</strong> caps the total number of distinct customers who can use it.
                                <strong>Audience</strong> controls who is eligible — e.g. <em>New customers only</em> applies only to first-time orders,
                                while <em>Orders greater / less than</em> targets customers by their total order history (set the threshold count that appears below the dropdown).
                                Start &amp; End dates let you run time-limited promotions.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ghost-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="addSubmitBtn">
                        <span class="spinner-border spinner-border-sm d-none me-1" id="addSpinner"></span>
                        <span id="addSubmitLabel">Create Discount</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ══════════════════════════
     EDIT MODAL
══════════════════════════ --}}
<div class="modal modal-blur fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="editDiscountForm" method="POST">
                @csrf
                <input type="hidden" name="is_coupon" id="edit_is_coupon" value="0">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalTitle">Edit Discount</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        {{-- Row 1: Value | Type | Name --}}
                        <div class="col-md-4">
                            <label class="form-label required">Value</label>
                            <div class="input-group">
                                <span class="input-group-text js-value-prefix">{{ $currencySymbol }}</span>
                                <input type="number" name="value" id="edit_value" class="form-control" required min="0.01" step="0.01">
                                <span class="input-group-text js-value-suffix d-none">%</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Type</label>
                            <select name="discount_type" id="edit_type" class="form-select js-discount-type" required>
                                <option value="percentage">Percentage (%)</option>
                                <option value="fixed">Fixed Amount</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Name</label>
                            <input type="text" name="name" id="edit_name" class="form-control js-auto-name" required maxlength="100" placeholder="e.g. 10% off">
                        </div>

                        {{-- Row 2: (Applies To -or- Coupon Code) | Start Date | End Date --}}
                        <div class="col-md-4 edit-discount-only">
                            <label class="form-label required">Applies To</label>
                            <select name="scope" id="edit_scope" class="form-select edit-scope-select">
                                <option value="all">All Products</option>
                                <option value="product">Specific Product</option>
                                <option value="products">Multiple Products</option>
                                <option value="category">Specific Category</option>
                                <option value="categories">Multiple Categories</option>
                                <option value="tag">Product Tag</option>
                            </select>
                        </div>
                        <div class="col-md-4 edit-coupon-only d-none">
                            <label class="form-label required">Coupon Code</label>
                            <input type="text" name="coupon_code" id="edit_coupon_code" class="form-control text-uppercase font-monospace" placeholder="SAVE10">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Start Date</label>
                            <input type="date" name="start_date" id="edit_start" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">End Date {!! tooltip('Leave empty for no expiry.') !!}</label>
                            <input type="date" name="end_date" id="edit_end" class="form-control">
                        </div>

                        {{-- Scope-specific pickers (full width, shown conditionally) --}}
                        <div class="col-12 edit-scope-product edit-discount-only d-none">
                            <label class="form-label required">Product</label>
                            <select name="store_product_id" id="edit_product" class="form-select">
                                <option value="">— Select Product —</option>
                                @foreach($products as $p)
                                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 edit-scope-category edit-discount-only d-none">
                            <label class="form-label required">Category</label>
                            <select name="store_category_id" id="edit_category" class="form-select">
                                <option value="">— Select Category —</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->parent_id ? '— ' : '' }}{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 edit-scope-products edit-discount-only d-none">
                            <label class="form-label">Products</label>
                            <div id="editProductsPicker" class="js-token-picker" data-name="store_product_ids[]" data-placeholder="Search products…" data-selected='[]'></div>
                        </div>
                        <div class="col-12 edit-scope-categories edit-discount-only d-none">
                            <label class="form-label">Categories</label>
                            <div id="editCategoriesPicker" class="js-token-picker" data-name="store_category_ids[]" data-placeholder="Search categories…" data-selected='[]'></div>
                        </div>
                        <div class="col-md-4 edit-scope-tag edit-discount-only d-none">
                            <label class="form-label">Product Tag</label>
                            <input type="text" class="form-control" name="target_product_tag" id="edit_tag" placeholder="e.g. new-arrival">
                        </div>

                        {{-- Row 3 discount: New customers only --}}
                        <div class="col-md-4 edit-discount-only">
                            <label class="form-check mt-1 cursor-pointer">
                                <input type="checkbox" class="form-check-input" id="edit_new_customers_only" name="new_customers_only" value="1">
                                <span class="form-check-label">
                                    New customers only
                                    {!! tooltip('Applies only to customers placing their first order.') !!}
                                </span>
                            </label>
                        </div>

                        {{-- Row 3 coupon: Max Uses | Max Unique | Audience --}}
                        <div class="col-md-4 edit-coupon-only d-none">
                            <label class="form-label">Max Uses / Customer {!! tooltip('Leave empty for unlimited.') !!}</label>
                            <input type="number" min="1" step="1" name="max_uses_per_customer" id="edit_max_uses" class="form-control" placeholder="Unlimited">
                        </div>
                        <div class="col-md-4 edit-coupon-only d-none">
                            <label class="form-label">Max Unique Customers {!! tooltip('Total distinct customers allowed.') !!}</label>
                            <input type="number" min="1" step="1" name="max_unique_customers" id="edit_max_unique" class="form-control" placeholder="Unlimited">
                        </div>
                        <div class="col-md-4 edit-coupon-only d-none">
                            <label class="form-label">Audience</label>
                            <select name="audience_rule" id="edit_audience" class="form-select js-audience-rule">
                                <option value="all">All customers</option>
                                <option value="new">New customers only</option>
                                <option value="basic">Basic customers</option>
                                <option value="golden">Golden customers</option>
                                <option value="package">Package customers</option>
                                <option value="orders_gt">Orders greater than…</option>
                                <option value="orders_lt">Orders less than…</option>
                            </select>
                        </div>
                        <div class="col-md-4 edit-coupon-only js-order-threshold d-none">
                            <label class="form-label">Order Count</label>
                            <input type="number" min="1" step="1" name="order_count_value" id="edit_order_count" class="form-control" placeholder="e.g. 5">
                        </div>

                        {{-- Coupon explanation --}}
                        <div class="col-12 edit-coupon-only d-none">
                            <div class="alert alert-info mb-0 py-2 px-3" style="font-size:.82rem;line-height:1.55;">
                                <strong>How coupons work:</strong>
                                The customer enters this code at checkout to receive the discount.
                                <strong>Max Uses / Customer</strong> limits how many times a single customer can redeem it (leave empty for unlimited).
                                <strong>Max Unique Customers</strong> caps the total number of distinct customers who can use it.
                                <strong>Audience</strong> controls who is eligible — e.g. <em>New customers only</em> applies only to first-time orders,
                                while <em>Orders greater / less than</em> targets customers by their total order history (set the threshold count that appears below the dropdown).
                                Start &amp; End dates let you run time-limited promotions.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ghost-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="editSubmitBtn">
                        <span class="spinner-border spinner-border-sm d-none me-1" id="editSpinner"></span>
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('style')
<style>
/* ── Token Picker ────────────────────────────────────── */
.tp-wrap { position: relative; }
.tp-search-group { display: flex; align-items: center; border: 1px solid var(--tblr-border-color, #d0d7de); border-radius: 6px; background: #fff; padding: 0 .5rem; transition: border-color .15s; }
.tp-search-group:focus-within { border-color: var(--tblr-primary, #206bc4); box-shadow: 0 0 0 3px rgba(32,107,196,.15); }
.tp-search-group .tp-icon { color: #8f95a0; flex-shrink: 0; }
.tp-search-group input { border: none !important; box-shadow: none !important; background: transparent; flex: 1; padding: .45rem .4rem; font-size: .875rem; }
.tp-dropdown { position: absolute; z-index: 1060; width: 100%; background: #fff; border: 1px solid var(--tblr-border-color, #d0d7de); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.1); max-height: 220px; overflow-y: auto; margin-top: 4px; }
.tp-dropdown .tp-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; cursor: pointer; font-size: .875rem; transition: background .1s; }
.tp-dropdown .tp-item:hover { background: var(--tblr-primary-lt, #e8f0fb); color: var(--tblr-primary, #206bc4); }
.tp-dropdown .tp-empty { padding: .5rem .75rem; font-size: .85rem; color: #8f95a0; text-align: center; }
.tp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; min-height: 28px; }
.tp-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; background: var(--tblr-primary-lt, #e8f0fb); color: var(--tblr-primary, #206bc4); border-radius: 20px; font-size: .8rem; font-weight: 500; cursor: default; }
.tp-chip button { border: none; background: none; padding: 0; line-height: 1; cursor: pointer; color: inherit; opacity: .6; font-size: .9rem; }
.tp-chip button:hover { opacity: 1; }
.tp-count { font-size: .78rem; color: #8f95a0; margin-top: .25rem; }
/* ── Badge row flush-left under name ────────────────── */
.d-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; margin-left: 0; padding-left: 0; }
/* ── Extra-small button ─────────────────────────────── */
.btn-xs { font-size: .7rem !important; padding: .1rem .38rem !important; line-height: 1.35 !important; border-radius: .25rem !important; }
/* ── Coupon code cell ───────────────────────────────── */
.coupon-code-cell { display: inline-flex; align-items: center; gap: .35rem; background: #fef2f2; border: 1.5px dashed #ef4444; border-radius: 6px; padding: .3rem .65rem; }
.coupon-code-text { font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: #dc2626; line-height: 1; }
.coupon-copy-btn { border: none; background: none; padding: 0; cursor: pointer; color: #dc2626; opacity: .65; line-height: 0; transition: opacity .15s, transform .1s; flex-shrink: 0; }
.coupon-copy-btn:hover { opacity: 1; transform: scale(1.15); }
.coupon-copy-btn.copied { color: #16a34a; opacity: 1; }
.coupon-value-text { margin-top: .3rem; font-weight: 600; font-size: .85rem; color: #374151; }
</style>
@endsection

@section('script')
<script>
(function () {
    'use strict';

    /* ── Constants ─────────────────────────────────────── */
    const csrf           = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
    const currencySymbol = @json((string) ($currencySymbol ?? '$'));
    const productOptions = @json($productOptionsJson);
    const categoryOptions = @json($categoryOptionsJson);
    const initialTab     = @json($initialTab);

    /* ── Utility ───────────────────────────────────────── */
    function esc(s) {
        const d = document.createElement('div');
        d.textContent = String(s ?? '');
        return d.innerHTML;
    }
    function showToast(type, msg) {
        if (window.toastr) window.toastr[type] && window.toastr[type](msg);
        else alert(msg);
    }
    if (window.toastr) {
        toastr.options = { closeButton: true, progressBar: true, positionClass: 'toast-top-right', timeOut: 4000 };
    }

    /* ── Tab switching ─────────────────────────────────── */
    let activeTab = initialTab;

    function switchTab(tab) {
        activeTab = tab;
        document.getElementById('panelDiscounts').style.display = tab === 'discounts' ? '' : 'none';
        document.getElementById('panelCoupons').style.display   = tab === 'coupons'   ? '' : 'none';
        document.querySelectorAll('.tab-btn').forEach(btn => {
            const isActive = btn.dataset.tab === tab;
            btn.classList.toggle('btn-primary', isActive);
            btn.classList.toggle('btn-outline-primary', !isActive);
        });
        const label = tab === 'coupons' ? 'Add Coupon' : 'Add Discount';
        document.getElementById('addItemBtnLabel').textContent = label;
        document.getElementById('addModalTitle').textContent   = label;
        document.getElementById('addSubmitLabel').textContent  = 'Create ' + (tab === 'coupons' ? 'Coupon' : 'Discount');
        document.getElementById('addIsCoupon').value = tab === 'coupons' ? '1' : '0';
        toggleModalCouponFields(document.getElementById('addModal'), tab === 'coupons');
        // reset scope selector to 'all' so pickers don't bleed between opens
        const scopeSel = document.querySelector('#addModal .add-scope-select');
        if (scopeSel) { scopeSel.value = 'all'; scopeSel.dispatchEvent(new Event('change')); }
    }

    document.querySelectorAll('.tab-btn').forEach(btn =>
        btn.addEventListener('click', () => switchTab(btn.dataset.tab))
    );

    /* ── Toggle coupon vs discount fields in a modal ───── */
    function toggleModalCouponFields(modal, isCoupon) {
        modal.querySelectorAll('.add-coupon-only, .edit-coupon-only').forEach(el => el.classList.toggle('d-none', !isCoupon));
        modal.querySelectorAll('.add-discount-only, .edit-discount-only').forEach(el => el.classList.toggle('d-none', isCoupon));
        // coupon code required only for coupons
        const code = modal.querySelector('input[name="coupon_code"]');
        if (code) code.required = isCoupon;
        const scope = modal.querySelector('select[name="scope"]');
        if (scope) scope.required = !isCoupon;
    }

    /* ── Improved Token Picker ─────────────────────────── */
    const tokenPickers = {};

    function initTokenPicker(containerId, options, preSelected) {
        const root = document.getElementById(containerId);
        if (!root) return;
        const fieldName = root.dataset.name;
        const placeholder = root.dataset.placeholder || 'Search…';
        const selected = new Set((preSelected || []).map(String));

        root.innerHTML = `
            <div class="tp-wrap">
                <div class="tp-search-group">
                    <svg class="tp-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                    <input type="text" class="tp-search-input" placeholder="${esc(placeholder)}" autocomplete="off">
                </div>
                <div class="tp-dropdown d-none"></div>
                <div class="tp-chips"></div>
                <div class="tp-hidden"></div>
            </div>
        `;

        const searchEl  = root.querySelector('.tp-search-input');
        const dropEl    = root.querySelector('.tp-dropdown');
        const chipsEl   = root.querySelector('.tp-chips');
        const hiddenEl  = root.querySelector('.tp-hidden');

        function render() {
            hiddenEl.innerHTML = '';
            chipsEl.innerHTML  = '';
            selected.forEach(id => {
                const row = options.find(o => String(o.id) === id);
                if (!row) return;
                const chip = document.createElement('span');
                chip.className = 'tp-chip';
                chip.innerHTML = `${esc(row.name)}<button type="button" title="Remove">×</button>`;
                chip.querySelector('button').addEventListener('click', () => {
                    selected.delete(id);
                    render();
                    if (searchEl.value.trim()) showDropdown(searchEl.value.trim());
                });
                chipsEl.appendChild(chip);
                const inp = document.createElement('input');
                inp.type  = 'hidden';
                inp.name  = fieldName;
                inp.value = id;
                hiddenEl.appendChild(inp);
            });
        }

        function showDropdown(term) {
            const q = term.toLowerCase();
            if (!q) { dropEl.classList.add('d-none'); return; }
            const hits = options.filter(o => !selected.has(String(o.id)) && o.name.toLowerCase().includes(q)).slice(0, 25);
            if (!hits.length) {
                dropEl.innerHTML = `<div class="tp-empty">No results for "${esc(term)}"</div>`;
                dropEl.classList.remove('d-none');
                return;
            }
            dropEl.innerHTML = '';
            hits.forEach(o => {
                const item = document.createElement('div');
                item.className = 'tp-item';
                item.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>${esc(o.name)}`;
                item.addEventListener('mousedown', e => {
                    e.preventDefault();
                    selected.add(String(o.id));
                    searchEl.value = '';
                    render();
                    dropEl.classList.add('d-none');
                    searchEl.focus();
                });
                dropEl.appendChild(item);
            });
            dropEl.classList.remove('d-none');
        }

        searchEl.addEventListener('input', () => showDropdown(searchEl.value.trim()));
        searchEl.addEventListener('focus', () => { if (searchEl.value.trim()) showDropdown(searchEl.value.trim()); });
        document.addEventListener('click', e => { if (!root.contains(e.target)) dropEl.classList.add('d-none'); });

        tokenPickers[containerId] = { selected, render };
        render();
    }

    function resetTokenPicker(containerId) {
        const p = tokenPickers[containerId];
        if (!p) return;
        p.selected.clear();
        p.render();
    }

    function setTokenPicker(containerId, ids) {
        const p = tokenPickers[containerId];
        if (!p) return;
        p.selected.clear();
        (ids || []).forEach(id => p.selected.add(String(id)));
        p.render();
    }

    /* ── Scope toggle ───────────────────────────────────── */
    function bindScopeToggle(modal, prefix) {
        const sel = modal.querySelector(`.${prefix}-scope-select`);
        if (!sel) return;
        const rows = {
            product:    modal.querySelector(`.${prefix}-scope-product`),
            products:   modal.querySelector(`.${prefix}-scope-products`),
            category:   modal.querySelector(`.${prefix}-scope-category`),
            categories: modal.querySelector(`.${prefix}-scope-categories`),
            tag:        modal.querySelector(`.${prefix}-scope-tag`),
        };
        sel.addEventListener('change', function () {
            Object.values(rows).forEach(el => el && el.classList.add('d-none'));
            if (rows[this.value]) rows[this.value].classList.remove('d-none');
        });
        sel.dispatchEvent(new Event('change'));
    }

    /* ── Value decorator ────────────────────────────────── */
    function bindValueDecorators(modal) {
        const typeEl = modal.querySelector('.js-discount-type');
        const pre    = modal.querySelector('.js-value-prefix');
        const suf    = modal.querySelector('.js-value-suffix');
        if (!typeEl) return;
        const apply = () => {
            const fixed = typeEl.value === 'fixed';
            if (pre) { pre.textContent = currencySymbol; pre.classList.toggle('d-none', !fixed); }
            if (suf) suf.classList.toggle('d-none', fixed);
        };
        typeEl.addEventListener('change', apply);
        apply();
    }

    /* ── Auto-name ──────────────────────────────────────── */
    function bindAutoName(modal) {
        const valueEl = modal.querySelector('input[name="value"]');
        const typeEl  = modal.querySelector('select[name="discount_type"]');
        const nameEl  = modal.querySelector('.js-auto-name');
        if (!valueEl || !typeEl || !nameEl) return;
        let touched = false;
        nameEl.addEventListener('input', () => { touched = nameEl.value.trim() !== ''; });
        const sync = () => {
            if (touched) return;
            const v = valueEl.value.trim();
            const t = typeEl.value;
            if (!v) return;
            nameEl.value = t === 'percentage' ? `${v}% off` : `${currencySymbol}${v} off`;
        };
        valueEl.addEventListener('input', sync);
        typeEl.addEventListener('change', sync);
    }

    /* ── Audience toggle ────────────────────────────────── */
    function bindAudienceToggle(modal) {
        const sel   = modal.querySelector('.js-audience-rule');
        const wrap  = modal.querySelector('.js-order-threshold');
        const input = wrap?.querySelector('input[name="order_count_value"]');
        if (!sel || !wrap) return;
        const apply = () => {
            const need = sel.value === 'orders_gt' || sel.value === 'orders_lt';
            wrap.classList.toggle('d-none', !need);
            if (input) input.required = need;
        };
        sel.addEventListener('change', apply);
        apply();
    }

    /* ── Init modals ────────────────────────────────────── */
    const addModal  = document.getElementById('addModal');
    const editModal = document.getElementById('editModal');

    initTokenPicker('addProductsPicker',    productOptions,  []);
    initTokenPicker('addCategoriesPicker',  categoryOptions, []);
    initTokenPicker('editProductsPicker',   productOptions,  []);
    initTokenPicker('editCategoriesPicker', categoryOptions, []);

    bindScopeToggle(addModal,  'add');
    bindScopeToggle(editModal, 'edit');
    bindValueDecorators(addModal);
    bindValueDecorators(editModal);
    bindAutoName(addModal);
    bindAutoName(editModal);
    bindAudienceToggle(addModal);
    bindAudienceToggle(editModal);

    // Reset add form when modal opens
    addModal.addEventListener('show.bs.modal', () => {
        document.getElementById('addDiscountForm').reset();
        resetTokenPicker('addProductsPicker');
        resetTokenPicker('addCategoriesPicker');
        // re-apply current tab state
        switchTab(activeTab);
        addModal.querySelectorAll('.js-auto-name').forEach(el => el.dispatchEvent(new Event('input')));
        // re-apply order threshold visibility after switchTab unblocks coupon fields
        addModal.querySelector('.js-audience-rule')?.dispatchEvent(new Event('change'));
    });

    /* ── Open edit modal ────────────────────────────────── */
    function openEditModal(d) {
        const isCoupon = !!d.is_coupon;
        document.getElementById('editDiscountForm').action = `/store/discounts/${d.id}/update`;
        document.getElementById('edit_is_coupon').value    = isCoupon ? '1' : '0';
        document.getElementById('editModalTitle').textContent = isCoupon ? 'Edit Coupon' : 'Edit Discount';

        toggleModalCouponFields(editModal, isCoupon);

        // Populate simple fields
        const set = (id, v) => {
            const el = document.getElementById(id);
            if (!el) return;
            const fp = el._flatpickr;
            if (fp) {
                if (v) fp.setDate(v, false);
                else fp.clear();
            } else {
                el.value = v ?? '';
            }
        };
        set('edit_name',         d.name);
        set('edit_type',         d.discount_type ?? 'percentage');
        set('edit_value',        d.value);
        set('edit_start',        d.start_date ? String(d.start_date).slice(0, 10) : '');
        set('edit_end',          d.end_date   ? String(d.end_date).slice(0, 10)   : '');
        set('edit_coupon_code',  d.coupon_code ?? '');
        set('edit_max_uses',     d.max_uses_per_customer ?? '');
        set('edit_max_unique',   d.max_unique_customers  ?? '');
        set('edit_audience',     d.audience_rule ?? 'all');
        set('edit_order_count',  d.order_count_value ?? '');

        const newCustEl = document.getElementById('edit_new_customers_only');
        if (newCustEl) newCustEl.checked = !!(d.new_customers_only);

        // Scope
        const targetPids = (d.target_product_ids || []).map(String);
        const targetCids = (d.target_category_ids || []).map(String);
        let scope = 'all';
        if (!isCoupon) {
            if (d.target_product_tag)              scope = 'tag';
            else if (targetPids.length > 1)        scope = 'products';
            else if (targetCids.length > 1)        scope = 'categories';
            else if (targetPids.length === 1)      scope = 'product';
            else if (targetCids.length === 1)      scope = 'category';
            else if (d.store_product_id)           scope = 'product';
            else if (d.store_category_id)          scope = 'category';
        }
        set('edit_scope', scope);
        const scopeSel = document.getElementById('edit_scope');
        if (scopeSel) scopeSel.dispatchEvent(new Event('change'));

        set('edit_product',  d.store_product_id  ?? '');
        set('edit_category', d.store_category_id ?? '');
        set('edit_tag',      d.target_product_tag ?? '');

        setTokenPicker('editProductsPicker',   targetPids.length ? targetPids : (d.store_product_id ? [d.store_product_id] : []));
        setTokenPicker('editCategoriesPicker', targetCids.length ? targetCids : (d.store_category_id ? [d.store_category_id] : []));

        // Trigger decorators
        editModal.querySelector('.js-discount-type')?.dispatchEvent(new Event('change'));
        editModal.querySelector('.js-audience-rule')?.dispatchEvent(new Event('change'));

        new bootstrap.Modal(editModal).show();
    }

    document.querySelectorAll('.js-discount-edit').forEach(btn => {
        btn.addEventListener('click', function () {
            try { openEditModal(JSON.parse(this.dataset.discount)); } catch (_) {}
        });
    });

    /* ── AJAX: Add form ────────────────────────────────── */
    document.getElementById('addDiscountForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const spinner = document.getElementById('addSpinner');
        const btn     = document.getElementById('addSubmitBtn');
        spinner.classList.remove('d-none');
        btn.disabled = true;

        try {
            const res  = await fetch(this.action, {
                method:  'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                body:    new FormData(this),
            });
            const data = await res.json().catch(() => ({}));
            if (res.ok && data.ok) {
                showToast('success', data.message || 'Created.');
                bootstrap.Modal.getInstance(addModal)?.hide();
                addRowToTable(data.discount);
                updateCounts(data.discount_count, data.coupon_count);
                this.reset();
                resetTokenPicker('addProductsPicker');
                resetTokenPicker('addCategoriesPicker');
            } else if (res.status === 422 && data.errors) {
                const first = Object.values(data.errors)[0];
                showToast('error', Array.isArray(first) ? first[0] : String(first));
            } else {
                showToast('error', data.message || 'Something went wrong.');
            }
        } catch (_) {
            showToast('error', 'Network error.');
        } finally {
            spinner.classList.add('d-none');
            btn.disabled = false;
        }
    });

    /* ── AJAX: Edit form ───────────────────────────────── */
    document.getElementById('editDiscountForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const spinner = document.getElementById('editSpinner');
        const btn     = document.getElementById('editSubmitBtn');
        spinner.classList.remove('d-none');
        btn.disabled = true;

        try {
            const fd = new FormData(this);
            fd.append('_method', 'POST');
            const res  = await fetch(this.action, {
                method:  'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
                body:    fd,
            });
            const data = await res.json().catch(() => ({}));
            if (res.ok && data.ok) {
                showToast('success', data.message || 'Saved.');
                bootstrap.Modal.getInstance(editModal)?.hide();
                // replace existing row
                const oldRow = document.getElementById('discount-row-' + data.discount.id);
                if (oldRow) {
                    const isCoupon = !!data.discount.is_coupon;
                    const newRow = buildRowHtml(data.discount, isCoupon);
                    oldRow.outerHTML = newRow;
                    bindRowEvents(document.getElementById('discount-row-' + data.discount.id));
                }
            } else if (res.status === 422 && data.errors) {
                const first = Object.values(data.errors)[0];
                showToast('error', Array.isArray(first) ? first[0] : String(first));
            } else {
                showToast('error', data.message || 'Something went wrong.');
            }
        } catch (_) {
            showToast('error', 'Network error.');
        } finally {
            spinner.classList.add('d-none');
            btn.disabled = false;
        }
    });

    /* ── Row building ──────────────────────────────────── */
    function formatCurrency(v) {
        return currencySymbol + Number(v || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function buildAppliesToHtml(d) {
        const pids  = (d.target_product_ids  || []).map(Number).filter(Boolean);
        const cids  = (d.target_category_ids || []).map(Number).filter(Boolean);
        const pNames = pids.map(id => productOptions.find(o => o.id === id)?.name).filter(Boolean);
        const cNames = cids.map(id => categoryOptions.find(o => o.id === id)?.name).filter(Boolean);

        if (pNames.length === 1) return `<span class="text-muted">Product:</span> ${esc(pNames[0])}`;
        if (pNames.length === 2) return `<span class="text-muted">Products:</span> ${esc(pNames.join(', '))}`;
        if (pNames.length >= 3)  return `<span class="text-muted">Products:</span> ${pids.length} selected <div class="mt-1"><button type="button" class="btn btn-xs btn-outline-primary js-discount-detail" data-title="Selected Products" data-items='${esc(JSON.stringify(pNames))}'>View</button></div>`;
        if (cNames.length === 1) return `<span class="text-muted">Category:</span> ${esc(cNames[0])}`;
        if (cNames.length === 2) return `<span class="text-muted">Categories:</span> ${esc(cNames.join(', '))}`;
        if (cNames.length >= 3)  return `<span class="text-muted">Categories:</span> ${cids.length} selected <div class="mt-1"><button type="button" class="btn btn-xs btn-outline-primary js-discount-detail" data-title="Selected Categories" data-items='${esc(JSON.stringify(cNames))}'>View</button></div>`;
        if (d.target_product_tag) return `<span class="badge bg-azure-lt text-azure">Tag: ${esc(d.target_product_tag)}</span>`;
        if (d.product?.name)      return `<span class="text-muted">Product:</span> ${esc(d.product.name)}`;
        if (d.category?.name)     return `<span class="text-muted">Category:</span> ${esc(d.category.name)}`;
        return `<span class="badge bg-indigo-lt text-indigo">All Products</span>`;
    }

    function buildPeriodHtml(d) {
        const dateStr  = d.created_at ? new Date(d.created_at).toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' }) : '—';
        const creator  = d.creator?.name ? ` by ${esc(d.creator.name)}` : '';
        const startRaw = d.start_date ? String(d.start_date).slice(0, 10) : null;
        const endRaw   = d.end_date   ? String(d.end_date).slice(0, 10)   : null;
        const startBadge = startRaw
            ? `<span class="badge bg-cyan-lt text-cyan">From ${new Date(startRaw + 'T00:00:00').toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })}</span>`
            : '';
        const expiry = endRaw
            ? `<span class="badge bg-orange-lt text-orange">Expires ${new Date(endRaw + 'T00:00:00').toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })}</span>`
            : `<span class="text-muted fst-italic">No expiry</span>`;
        return `<div class="d-badges">${startBadge}${expiry}</div><div class="text-muted mt-1">Created: ${esc(dateStr)}${creator}</div>`;
    }

    function buildRowHtml(d, isCoupon) {
        const now     = new Date();
        now.setHours(0,0,0,0);
        const endDate = d.end_date ? new Date(String(d.end_date).slice(0, 10) + 'T00:00:00') : null;
        const expired = endDate && endDate < now;

        const value     = d.discount_type === 'percentage' ? `${d.value}%` : `${formatCurrency(d.value)} off`;
        const typeBadge = `<span class="badge bg-${d.discount_type === 'percentage' ? 'blue' : 'green'}-lt text-${d.discount_type === 'percentage' ? 'blue' : 'green'}">${d.discount_type === 'percentage' ? 'Percentage' : 'Fixed'}</span>`;
        const statusBadge = d.is_active && !expired
            ? `<span class="badge bg-success-lt text-success">Active</span>`
            : expired ? `<span class="badge bg-secondary-lt text-secondary">Expired</span>`
            : `<span class="badge bg-danger-lt text-danger">Inactive</span>`;
        const newCustBadge = d.new_customers_only ? `<span class="badge bg-purple-lt text-purple">New Customers</span>` : '';
        const couponDisplayValue = d.discount_type === 'percentage' ? `${d.value}% OFF` : `${formatCurrency(d.value)} OFF`;
        const codeCell = isCoupon
            ? `<td><div class="coupon-code-cell"><span class="coupon-code-text font-monospace">${esc(d.coupon_code)}</span><button type="button" class="coupon-copy-btn js-copy-code" data-code="${esc(d.coupon_code)}" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div><div class="coupon-value-text">${esc(couponDisplayValue)}</div></td>`
            : `<td class="fw-bold">${esc(value)}</td>`;
        const appliesCell = isCoupon ? '—' : buildAppliesToHtml(d);
        const periodCell  = buildPeriodHtml(d);
        const discountData = esc(JSON.stringify(d));

        return `<tr id="discount-row-${d.id}" class="${expired ? 'opacity-50' : ''}">
            <td><div class="fw-bold">${esc(d.name)}</div><div class="d-badges">${typeBadge}${statusBadge}${newCustBadge}</div></td>
            ${codeCell}
            <td class="small">${appliesCell}</td>
            <td class="small">${periodCell}</td>
            <td class="text-end"><div class="d-inline-flex align-items-center gap-2">
                <label class="form-check form-switch m-0"><input class="form-check-input js-discount-toggle" type="checkbox" data-url="/store/discounts/${d.id}/toggle" ${d.is_active ? 'checked' : ''}></label>
                <button type="button" class="btn btn-sm btn-warning js-discount-edit" data-discount='${discountData}'><i class="bi bi-pencil"></i></button>
                <button type="button" class="btn btn-sm btn-danger js-discount-delete" data-id="${d.id}" data-url="/store/discounts/${d.id}" data-name="${esc(d.name)}"><i class="bi bi-trash"></i></button>
            </div></td>
        </tr>`;
    }

    function addRowToTable(d) {
        const isCoupon = !!d.is_coupon;
        const tbody    = document.getElementById(isCoupon ? 'tbodyCoupons' : 'tbodyDiscounts');
        const emptyRow = document.getElementById(isCoupon ? 'couponsEmptyRow' : 'discountsEmptyRow');
        if (emptyRow) emptyRow.remove();
        const tmp = document.createElement('tbody');
        tmp.innerHTML = buildRowHtml(d, isCoupon);
        const newRow  = tmp.firstElementChild;
        tbody.prepend(newRow);
        bindRowEvents(newRow);
        newRow.style.transition = 'background .4s';
        newRow.style.background = 'var(--tblr-success-lt, #e8f5e9)';
        setTimeout(() => { newRow.style.background = ''; }, 1200);
    }

    /* ── Bind events on a row (for AJAX-created/updated rows) ── */
    function bindRowEvents(row) {
        row.querySelectorAll('.js-discount-toggle').forEach(toggle => {
            toggle.addEventListener('change', handleToggle);
        });
        row.querySelectorAll('.js-discount-edit').forEach(btn => {
            btn.addEventListener('click', function () {
                try { openEditModal(JSON.parse(this.dataset.discount)); } catch (_) {}
            });
        });
        row.querySelectorAll('.js-discount-delete').forEach(btn => {
            btn.addEventListener('click', handleDelete);
        });
        row.querySelectorAll('.js-discount-detail').forEach(btn => {
            btn.addEventListener('click', handleDetail);
        });
        bindCopyCode(row);
    }

    /* ── Counts ─────────────────────────────────────────── */
    function updateCounts(dc, cc) {
        if (dc !== undefined) document.getElementById('discountCountBadge').textContent = dc;
        if (cc !== undefined) document.getElementById('couponCountBadge').textContent   = cc;
    }

    /* ── Toggle ─────────────────────────────────────────── */
    async function handleToggle() {
        const prev = !this.checked;
        this.disabled = true;
        try {
            const res  = await fetch(this.dataset.url, {
                method:  'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            });
            const data = await res.json();
            if (!res.ok || !data.ok) throw new Error(data.message || 'Failed.');
            this.checked = !!data.is_active;
            showToast('success', data.message || 'Updated.');
        } catch (err) {
            this.checked = prev;
            showToast('error', err.message);
        } finally {
            this.disabled = false;
        }
    }

    document.querySelectorAll('.js-discount-toggle').forEach(t => t.addEventListener('change', handleToggle));

    /* ── Delete ─────────────────────────────────────────── */
    async function handleDelete() {
        const { id, url, name } = this.dataset;
        const ok = window.Swal
            ? (await Swal.fire({ title: 'Delete?', text: `"${name}"`, icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete' })).isConfirmed
            : confirm(`Delete "${name}"?`);
        if (!ok) return;
        try {
            const res  = await fetch(url, {
                method:  'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
                body:    '_method=DELETE',
            });
            const data = await res.json();
            if (!res.ok || !data.ok) throw new Error(data.message || 'Failed.');
            const row = document.getElementById('discount-row-' + id);
            if (row) {
                row.style.transition = 'opacity 200ms, transform 200ms';
                row.style.opacity    = '0';
                row.style.transform  = 'translateY(-6px)';
                setTimeout(() => row.remove(), 220);
            }
            updateCounts(data.discount_count, data.coupon_count);
            showToast('success', data.message || 'Deleted.');
        } catch (err) {
            showToast('error', err.message);
        }
    }

    document.querySelectorAll('.js-discount-delete').forEach(btn => btn.addEventListener('click', handleDelete));

    /* ── Detail view ────────────────────────────────────── */
    function handleDetail() {
        let items = [];
        try { items = JSON.parse(this.dataset.items || '[]'); } catch (_) {}
        if (!items.length) { showToast('info', 'No details.'); return; }
        const html = `<div style="text-align:left;max-height:300px;overflow:auto;">${items.map((n, i) => `<div>${i + 1}. ${esc(n)}</div>`).join('')}</div>`;
        window.Swal
            ? Swal.fire({ title: this.dataset.title || 'Details', html, confirmButtonText: 'Close' })
            : alert((this.dataset.title || 'Details') + '\n\n' + items.join('\n'));
    }

    document.querySelectorAll('.js-discount-detail').forEach(btn => btn.addEventListener('click', handleDetail));

    /* ── Coupon usage detail ─────────────────────────────── */
    document.querySelectorAll('.js-coupon-usage-detail').forEach(btn => {
        btn.addEventListener('click', function () {
            let rows = [];
            try { rows = JSON.parse(this.dataset.items || '[]'); } catch (_) {}
            if (!rows.length) { showToast('info', 'No usage history.'); return; }
            const html = `<div style="text-align:left;max-height:320px;overflow:auto;"><table style="width:100%;border-collapse:collapse;"><thead><tr><th style="padding:6px 4px;border-bottom:1px solid #e5e7eb;">Customer</th><th style="padding:6px 4px;border-bottom:1px solid #e5e7eb;">Used At</th></tr></thead><tbody>${rows.map(r => `<tr><td style="padding:5px 4px;border-bottom:1px solid #f1f5f9;">${esc(r.customer)}</td><td style="padding:5px 4px;border-bottom:1px solid #f1f5f9;">${esc(r.used_at)}</td></tr>`).join('')}</tbody></table></div>`;
            window.Swal
                ? Swal.fire({ title: this.dataset.title || 'Coupon Usage', html, width: 580, confirmButtonText: 'Close' })
                : alert(rows.map(r => `${r.customer} – ${r.used_at}`).join('\n'));
        });
    });

    /* ── Copy coupon code ───────────────────────────────── */
    function bindCopyCode(root) {
        (root || document).querySelectorAll('.js-copy-code').forEach(btn => {
            btn.addEventListener('click', function () {
                const code = this.dataset.code || '';
                navigator.clipboard?.writeText(code).then(() => {
                    this.classList.add('copied');
                    const orig = this.innerHTML;
                    this.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>';
                    setTimeout(() => { this.innerHTML = orig; this.classList.remove('copied'); }, 1600);
                }).catch(() => {
                    showToast('info', `Code: ${code}`);
                });
            });
        });
    }
    bindCopyCode();

    /* ── Initial tab state ──────────────────────────────── */
    switchTab(activeTab);

})();
</script>
@endsection