@if($deals->isEmpty())
    <p>No deals yet.</p>
@else
    <div style="overflow-x:auto;">
        <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;">Deal</th>
                    <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;">Starts</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Ends</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Status</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Details</th>
                    <th style="padding:0.5rem; border:1px solid #e5e7eb;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($deals as $deal)
                    @php
                        $first = $deal->dealProducts->first();
                        $isFinished = $deal->restored || ($deal->ends_at && $deal->ends_at->isPast());
                    @endphp
                    <tr style="border-bottom:1px solid #e5e7eb;">
                        <td style="padding:0.5rem; border:1px solid #e5e7eb; vertical-align:middle;"><strong>#{{ $deal->id }}</strong></td>
                        <td style="padding:0.5rem; border:1px solid #e5e7eb; vertical-align:middle;">
                            @if($first && $first->image_url)
                                <img src="{{ $first->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;">
                            @if($first)
                                {{ $first->title }}
                                @if($deal->dealProducts->count() > 1)
                                    <br><span style="font-size:0.85rem; color:#6b7280;">+{{ $deal->dealProducts->count() - 1 }} more</span>
                                @endif
                            @else
                                —
                            @endif
                        </td>
                        <td style="padding:0.5rem; border:1px solid #e5e7eb;">{{ $deal->starts_at ? $deal->starts_at->copy()->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('m/d/Y g:i A') : '—' }}</td>
                        <td style="padding:0.5rem; border:1px solid #e5e7eb;">{{ $deal->ends_at ? $deal->ends_at->copy()->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('m/d/Y g:i A') : '—' }}</td>
                        <td style="padding:0.5rem; border:1px solid #e5e7eb;">
                            @if($deal->restored)
                                <span style="color:#16a34a; font-weight:bold;">Finished</span>
                            @elseif($isFinished)
                                <span style="color:#b45309; font-weight:bold;">Waiting to restore prices</span>
                            @else
                                <span style="color:#1d4ed8; font-weight:bold;">Running</span>
                            @endif
                        </td>
                        <td style="padding:0.5rem; border:1px solid #e5e7eb; vertical-align:middle;">
                            <button type="button" class="btn-deal-details btn btn-secondary" data-deal-id="{{ $deal->id }}" style="padding:0.25rem 0.5rem; font-size:0.75rem; min-width:4.5rem;">Details</button>
                        </td>
                        <td style="padding:0.5rem; border:1px solid #e5e7eb; vertical-align:middle;">
                            @if(!$deal->restored && Route::has('deals.edit'))
                                <span style="display:inline-flex; align-items:center; gap:0.4rem;">
                                    @if(!$isFinished)
                                    <a href="{{ route('deals.edit', $deal) }}" class="btn btn-secondary" style="padding:0.25rem 0.4rem; font-size:0.75rem; font-weight:500; line-height:1.25; width:4rem; min-width:4rem; height:1.75rem; display:inline-flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; border-width:1px;">Edit</a>
                                    @endif
                                    <form action="{{ route('deals.destroy', $deal) }}" method="post" style="display:inline;" onsubmit="return confirm('Delete this deal? Prices will be restored in Shopify. The deal is kept if Shopify does not confirm the restore.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger" style="padding:0.25rem 0.4rem; font-size:0.75rem; font-weight:500; line-height:1.25; width:4rem; min-width:4rem; height:1.75rem; border-width:1px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;">Delete</button>
                                    </form>
                                </span>
                            @else
                                <span style="color:#9ca3af;">—</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {{ $deals->links('vendor.pagination.simple-default') }}
@endif