@if($activeDeals->isEmpty())
    <p>No active deals.</p>
@else
    <form action="{{ route('deals.send-notification') }}" method="post" style="margin-bottom:0.75rem;" onsubmit="return confirm('Send active deals report (PDF) to the configured email now?');">
        @csrf
        <button type="submit" class="btn btn-secondary" style="padding:0.35rem 0.75rem; font-size:0.9rem; min-width:11rem;">Resend notification (PDF)</button>
    </form>
    <form action="{{ route('deals.sync-badge-snippet') }}" method="post" style="margin-bottom:0.75rem;" onsubmit="return confirm('Push the savings bubble snippet to Shopify and sync badge data?');">
        @csrf
        <button type="submit" class="btn btn-secondary" style="padding:0.35rem 0.75rem; font-size:0.9rem; min-width:11rem;">Update bubble snippet</button>
    </form>
    <div id="active-deals-bars" style="text-align:right; margin-bottom:0.5rem;">
        @foreach($activeDeals as $deal)
        <div class="active-deal-bar" data-deal-id="{{ $deal->id }}" style="font-size:0.85rem; margin-bottom:0.35rem;">
            <span style="font-weight:600; color:#1e40af;">Deal #{{ $deal->id }}</span>
            <span style="color:#6b7280; margin-left:0.5rem;">Time left:</span>
            <span class="deal-countdown" data-end="{{ $deal->ends_at->toIso8601String() }}" style="font-weight:bold; color:#1d4ed8; margin-left:0.25rem;">--</span>
            <button type="button" class="btn btn-primary btn-add-products-to-deal" data-deal-id="{{ $deal->id }}" data-ends-at="{{ $deal->ends_at->toIso8601String() }}" data-add-url="{{ route('deals.add-products', $deal) }}" style="padding:0.3rem 0.55rem; font-size:0.8rem; margin-left:0.75rem; min-width:6.5rem;">Add products</button>
            @if(Route::has('deals.edit'))
                <a href="{{ route('deals.edit', $deal) }}" class="btn btn-secondary" style="padding:0.3rem 0.55rem; font-size:0.8rem; margin-left:0.25rem; min-width:4.5rem; display:inline-block; text-align:center; box-sizing:border-box;">Edit</a>
            @endif
            <form action="{{ route('deals.destroy', $deal) }}" method="post" style="display:inline; margin-left:0.25rem;" onsubmit="return confirm('Delete this deal and restore original prices in Shopify?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger" style="padding:0.3rem 0.55rem; font-size:0.8rem; min-width:4.5rem;">Delete</button>
            </form>
        </div>
        @endforeach
    </div>
    <div style="overflow-x:auto;">
        <table id="active-deals-table" style="width:100%; border-collapse:collapse; font-size:0.9rem;">
            <thead>
                <tr style="background:#f3f4f6; text-align:left;">
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Image</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Product</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Deal applied</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Compare discount</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Time left</th>
                </tr>
            </thead>
            <tbody>
                @foreach($activeDeals as $deal)
                    @foreach($deal->dealProducts as $dp)
                        <tr class="active-deal-product-row" data-deal-id="{{ $deal->id }}" style="border-bottom:1px solid #e5e7eb;">
                            <td style="padding:0.5rem; border:1px solid #e5e7eb; vertical-align:middle;">
                                @if($dp->image_url)
                                    <img src="{{ $dp->image_url }}" alt="" style="width:50px; height:50px; object-fit:cover; border-radius:4px;">
                                @else
                                    <span style="color:#9ca3af;">—</span>
                                @endif
                            </td>
                            <td style="padding:0.5rem; border:1px solid #e5e7eb;">{{ $dp->title }}</td>
                            <td style="padding:0.5rem; border:1px solid #e5e7eb;">
                                @php
                                    $pt = $dp->profit_type ?? $deal->profit_type;
                                    $pv = $dp->profit_value !== null ? (float) $dp->profit_value : (float) $deal->profit_value;
                                @endphp
                                @if($pt === 'percentage')
                                    {{ number_format($pv, 0) }}% profit
                                @else
                                    ${{ number_format($pv, 2) }} profit
                                @endif
                                <br><span style="font-size:0.85rem; color:#6b7280;">Cost {{ $dp->cost !== null ? '$' . number_format($dp->cost, 2) : '—' }}</span>
                                <br><span style="font-size:0.85rem; color:#6b7280;">Sale ${{ number_format($dp->deal_price, 2) }}</span>
                            </td>
                            <td style="padding:0.5rem; border:1px solid #e5e7eb;">
                                @if(($deal->compare_at_mode ?? 'use_original') === 'use_original')
                                    @php $prevVal = $dp->deal_compare_at_price ?? $dp->original_price; @endphp
                                    <span style="color:#6b7280;">Previous price</span>
                                    @if($prevVal !== null && $prevVal > 0)
                                        <br><span style="font-size:0.85rem;">${{ number_format($prevVal, 2) }}</span>
                                    @endif
                                @else
                                    {{ number_format($deal->compare_discount_percent ?? 0, 0) }}% off
                                @endif
                            </td>
                            <td style="padding:0.5rem; border:1px solid #e5e7eb;">
                                <span class="deal-countdown" data-end="{{ $deal->ends_at->toIso8601String() }}" style="font-weight:bold; color:#1d4ed8;">--</span>
                            </td>
                        </tr>
                    @endforeach
                @endforeach
            </tbody>
        </table>
    </div>
    <nav id="active-deals-pagination" role="navigation" style="margin-top:0.5rem; font-size:0.9rem; display:none;"></nav>
@endif