@extends('backEnd.layouts.master')
@section('title', 'Change Products — ' . $landingPage->name)

@push('styles')
<style>
.ob-card { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; margin-top: 20px; }
.ob-card__head { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; padding: 14px 18px; font-weight: 700; }
.ob-card__body { padding: 18px; background: #fafafa; }
.ob-preview { display: flex; gap: 12px; align-items: center; padding: 12px; border: 2px dashed #c4b5fd; border-radius: 12px; background: #fff; margin-top: 12px; }
.ob-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.ob-help { font-size: 12px; color: #6b7280; line-height: 1.6; }
.ob-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0">Products & Order Bump</h4>
            <small class="text-muted">{{ $landingPage->name }} (#{{ $landingPage->id }})</small>
        </div>
        <a href="{{ route('admin.landing-page.index') }}" class="btn btn-outline-secondary btn-sm">Back to Landing Pages</a>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.landing-page.products.update', $landingPage) }}">
                @csrf
                <p class="text-muted small mb-2">
                    Active theme:
                    <span class="badge bg-success">{{ ucfirst($activeTheme ?? \App\Services\ThemeService::active()) }}</span>
                </p>

                <div class="alert alert-success py-2 small mb-3">
                    <strong>Step 1 — Main Product:</strong> প্রথম checked product = landing page-এর main offer (order form-এ দেখাবে)<br>
                    <strong>Step 2 — Order Bump:</strong> নিচে extra offer সেট করুন — customer checkout-এ checkbox tick করলে add হবে<br>
                    <strong>Step 3 — Page Builder:</strong> চাইলে <em>Order Bump Offer</em> block drag করে custom position দিতে পারেন
                </div>

                <h6 class="fw-bold mb-2"><i class="fas fa-box me-1 text-success"></i> Main Products</h6>
                @error('product_ids')<div class="alert alert-danger py-2 small">{{ $message }}</div>@enderror
                <div class="row g-2 mb-3" style="max-height:320px;overflow:auto;">
                    @forelse($products as $product)
                    <div class="col-md-6 col-lg-4">
                        <label class="d-flex align-items-center gap-2 border rounded p-2 h-100" style="cursor:pointer">
                            <input type="checkbox" name="product_ids[]" value="{{ $product->id }}"
                                   {{ in_array($product->id, old('product_ids', $landingPage->product_ids ?? [])) ? 'checked' : '' }}>
                            @if($product->thumbnail)
                            <img src="{{ asset($product->thumbnail) }}" width="40" height="40" class="rounded" style="object-fit:cover">
                            @endif
                            <span class="small fw-semibold">{{ $product->name }}</span>
                            <span class="small text-muted ms-auto">৳{{ number_format($product->sale_price ?: $product->price, 0) }}</span>
                        </label>
                    </div>
                    @empty
                    <div class="col-12"><p class="text-muted small mb-0">এই theme-এ কোনো published product নেই।</p></div>
                    @endforelse
                </div>

                <div class="ob-card">
                    <div class="ob-card__head"><i class="fas fa-gift me-2"></i> Order Bump (Extra Offer)</div>
                    <div class="ob-card__body">
                        <div class="ob-toggle">
                            <input type="checkbox" class="form-check-input" id="orderBumpEnabled" name="order_bump_enabled" value="1"
                                   {{ old('order_bump_enabled', $orderBump['enabled'] ?? false) ? 'checked' : '' }}>
                            <label for="orderBumpEnabled" class="form-check-label fw-semibold mb-0">Enable Order Bump on this landing page</label>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">Bump Product *</label>
                                <select name="order_bump_product_id" class="form-select form-select-sm @error('order_bump_product_id') is-invalid @enderror">
                                    <option value="">— Select product —</option>
                                    @foreach($products as $product)
                                    <option value="{{ $product->id }}"
                                        {{ (string) old('order_bump_product_id', $orderBump['product_id'] ?? '') === (string) $product->id ? 'selected' : '' }}>
                                        {{ $product->name }} — ৳{{ number_format($product->sale_price ?: $product->price, 0) }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('order_bump_product_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <div class="ob-help mt-1">Main product-এর থেকে আলাদা product select করুন।</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small fw-semibold">Custom Price (optional)</label>
                                <input type="number" min="0" step="1" name="order_bump_custom_price" class="form-control form-control-sm"
                                       value="{{ old('order_bump_custom_price', $orderBump['custom_price'] ?? '') }}"
                                       placeholder="খালি = product price">
                                <div class="ob-help mt-1">Special bump price দিতে চাইলে লিখুন।</div>
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <div class="form-check mb-2">
                                    <input type="checkbox" class="form-check-input" id="orderBumpDefault" name="order_bump_default_checked" value="1"
                                           {{ old('order_bump_default_checked', $orderBump['default_checked'] ?? false) ? 'checked' : '' }}>
                                    <label for="orderBumpDefault" class="form-check-label small">Default checked</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">Headline (customer দেখবে)</label>
                                <input type="text" name="order_bump_headline" class="form-control form-control-sm"
                                       value="{{ old('order_bump_headline', $orderBump['headline'] ?? \App\Services\LandingOrderBumpService::defaults()['headline']) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">Short Description</label>
                                <input type="text" name="order_bump_description" class="form-control form-control-sm"
                                       value="{{ old('order_bump_description', $orderBump['description'] ?? \App\Services\LandingOrderBumpService::defaults()['description']) }}">
                            </div>
                        </div>

                        @if(!empty($orderBumpPreview))
                        <div class="ob-preview">
                            @if($orderBumpPreview['image'])
                            <img src="{{ $orderBumpPreview['image'] }}" alt="">
                            @endif
                            <div class="flex-grow-1">
                                <div class="small fw-bold">{{ $orderBumpPreview['headline'] }}</div>
                                <div class="small text-muted">{{ $orderBumpPreview['name'] }}</div>
                            </div>
                            <div class="text-end">
                                @if($orderBumpPreview['regular_price'] > $orderBumpPreview['price'])
                                <del class="small text-muted">৳{{ number_format($orderBumpPreview['regular_price'], 0) }}</del>
                                @endif
                                <div class="fw-bold text-success">+৳{{ number_format($orderBumpPreview['price'], 0) }}</div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <button class="btn btn-success btn-sm mt-3"><i class="fas fa-save me-1"></i> Save Products & Order Bump</button>
            </form>
        </div>
    </div>
</div>
@endsection