@php
    $promoCards = \App\Services\HomepagePromoCardsService::get($activeTheme ?? null);
@endphp
<div class="col-12">
    <div class="card shadow-sm border-0">
        <div class="card-header bg-light fw-bold d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span><i class="fas fa-images me-2 text-success"></i>Promo Cards (After Categories)</span>
            <span class="badge bg-secondary">Max 3 cards</span>
        </div>
        <div class="card-body">
            <p class="small text-muted mb-3">
                Category section-এর ঠিক পরে ৩টি promo card দেখাবে। Section on/off করতে উপরে
                <strong>Promo Cards</strong> toggle ব্যবহার করুন। Image upload, title, details, button text/link সব customize করা যাবে।
            </p>

            <button type="submit"
                    formaction="{{ route('admin.settings.homepage.demo-promo-cards') }}"
                    class="btn btn-sm btn-outline-success mb-3">
                <i class="fas fa-magic me-1"></i>Load Demo Promo Cards
            </button>

            <div class="row g-3">
                @foreach($promoCards as $i => $card)
                <div class="col-lg-4">
                    <div class="border rounded p-3 h-100 bg-white">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <strong>Card {{ $i + 1 }}</strong>
                            <div class="form-check form-switch m-0">
                                <input class="form-check-input" type="checkbox" name="promo_cards[{{ $i }}][enabled]" value="1" id="promoCardEnabled{{ $i }}"
                                       @checked(!empty($card['enabled']))>
                                <label class="form-check-label small" for="promoCardEnabled{{ $i }}">On</label>
                            </div>
                        </div>

                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Title / Product Name</label>
                            <input type="text" name="promo_cards[{{ $i }}][title]" class="form-control form-control-sm"
                                   value="{{ old("promo_cards.{$i}.title", $card['title'] ?? '') }}">
                        </div>

                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Details / Subtitle</label>
                            <textarea name="promo_cards[{{ $i }}][subtitle]" class="form-control form-control-sm" rows="2">{{ old("promo_cards.{$i}.subtitle", $card['subtitle'] ?? '') }}</textarea>
                        </div>

                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Background Color</label>
                            <input type="color" name="promo_cards[{{ $i }}][bg_color]" class="form-control form-control-color w-100"
                                   value="{{ old("promo_cards.{$i}.bg_color", $card['bg_color'] ?? '#ffffff') }}">
                        </div>

                        <div class="mb-2">
                            <label class="form-label small fw-semibold">Product Image</label>
                            <input type="file" name="promo_cards[{{ $i }}][image]" class="form-control form-control-sm" accept="image/*">
                            <input type="hidden" name="promo_cards[{{ $i }}][existing_image]" value="{{ $card['image'] ?? '' }}">
                            <input type="text" name="promo_cards[{{ $i }}][image_url]" class="form-control form-control-sm mt-1"
                                   placeholder="Or paste image URL" value="{{ old("promo_cards.{$i}.image_url") }}">
                            @if(!empty($card['image']))
                            <div class="mt-2">
                                <img src="{{ \App\Services\HomepagePromoCardsService::imageUrl($card['image']) }}" alt="" class="rounded border" style="max-height:72px;max-width:100%;object-fit:contain">
                                <div class="form-check mt-1">
                                    <input class="form-check-input" type="checkbox" name="promo_cards[{{ $i }}][remove_image]" value="1" id="promoRemoveImage{{ $i }}">
                                    <label class="form-check-label small" for="promoRemoveImage{{ $i }}">Remove image</label>
                                </div>
                            </div>
                            @endif
                        </div>

                        <div class="row g-2">
                            <div class="col-12">
                                <label class="form-label small fw-semibold">Button Text</label>
                                <input type="text" name="promo_cards[{{ $i }}][button_text]" class="form-control form-control-sm"
                                       value="{{ old("promo_cards.{$i}.button_text", $card['button_text'] ?? 'Shop Now') }}" placeholder="Shop Now / More Details">
                            </div>
                            <div class="col-12">
                                <label class="form-label small fw-semibold">Button Link</label>
                                <input type="text" name="promo_cards[{{ $i }}][button_link]" class="form-control form-control-sm"
                                       value="{{ old("promo_cards.{$i}.button_link", $card['button_link'] ?? '/products') }}" placeholder="/products or https://...">
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>