@php
    $pi = $productItems ?? \App\Services\ProductItemSettingsService::get(\App\Services\ThemeService::active());
    $columnOptions = [
        1 => '1 item per row',
        2 => '2 items per row',
        3 => '3 items per row',
        4 => '4 items per row',
        5 => '5 items per row',
        6 => '6 items per row',
    ];
    $fitOptions = [
        'contain' => 'Contain — Fit entire image within container',
        'cover'   => 'Cover — Fill container, crop if needed',
    ];
@endphp

@push('styles')
<style>
.pi-settings-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }
.pi-preview-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    position: sticky;
    top: 1rem;
}
.pi-preview-bar {
    display: flex;
    gap: 4px;
    margin: 8px 0 4px;
}
.pi-preview-seg {
    flex: 1;
    min-height: 34px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.pi-preview-home .pi-preview-seg { background: #3b82f6; }
.pi-preview-category .pi-preview-seg { background: #22c55e; }
.pi-preview-product .pi-preview-seg { background: #eab308; color: #111827; }
.pi-fit-example {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.pi-fit-contain { background: linear-gradient(135deg, #22c55e, #3b82f6); }
.pi-fit-cover { background: linear-gradient(135deg, #f97316, #ef4444); }
</style>
@endpush

<div class="pi-settings-title">Column Settings</div>
<p class="text-muted small mb-3">
    <span class="badge bg-success">{{ ucfirst(\App\Services\ThemeService::active()) }}</span>
    theme এর storefront product grid layout configure করুন।
</p>

<div class="row g-4">
    <div class="col-lg-7">
        <h6 class="fw-bold mb-3">Column Configuration</h6>

        <div class="mb-3">
            <label class="form-label fw-semibold">Home Page Columns</label>
            <select name="home_columns" class="form-select pi-col-select" data-preview="home" style="max-width:280px">
                @foreach($columnOptions as $val => $label)
                <option value="{{ $val }}" @selected((int) ($pi['home_columns'] ?? 6) === $val)>{{ $label }}</option>
                @endforeach
            </select>
            <div class="form-text">Home page এ প্রতি row তে কতগুলো product column দেখাবে।</div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Category Page Columns</label>
            <select name="category_columns" class="form-select pi-col-select" data-preview="category" style="max-width:280px">
                @foreach($columnOptions as $val => $label)
                <option value="{{ $val }}" @selected((int) ($pi['category_columns'] ?? 6) === $val)>{{ $label }}</option>
                @endforeach
            </select>
            <div class="form-text">Category / shop listing page এ প্রতি row তে column সংখ্যা।</div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Product Page Columns</label>
            <select name="product_columns" class="form-select pi-col-select" data-preview="product" style="max-width:280px">
                @foreach($columnOptions as $val => $label)
                <option value="{{ $val }}" @selected((int) ($pi['product_columns'] ?? 6) === $val)>{{ $label }}</option>
                @endforeach
            </select>
            <div class="form-text">Product detail page এর Related Products section এ column সংখ্যা।</div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Products Per Page</label>
            <input type="number" name="products_per_page" class="form-control" style="max-width:160px" min="4" max="48"
                   value="{{ old('products_per_page', $setting->products_per_page ?? 12) }}">
            <div class="form-text">Pagination — প্রতি page এ কতগুলো product load হবে।</div>
        </div>

        <hr class="my-4">

        <h6 class="fw-bold mb-3">Button Display Settings</h6>
        <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" name="show_add_to_cart_icon" id="showAddToCartIcon" value="1"
                {{ ($pi['show_add_to_cart_icon'] ?? true) ? 'checked' : '' }}>
            <label class="form-check-label fw-semibold" for="showAddToCartIcon">Show Add To Cart Icon</label>
        </div>
        <div class="form-text mb-3">
            Enable করলে Buy Now 70% + Add to Cart icon 30% width। Disable করলে Buy Now full width (100%)।
        </div>

        <hr class="my-4">

        <h6 class="fw-bold mb-3">Image Display Settings</h6>

        @foreach([
            ['key' => 'home_image_fit', 'label' => 'Home Page Image Fit', 'preview' => 'home', 'hint' => 'Home page product cards'],
            ['key' => 'category_image_fit', 'label' => 'Category Page Image Fit', 'preview' => 'category', 'hint' => 'Category / shop listing cards'],
            ['key' => 'product_image_fit', 'label' => 'Product Page Image Fit', 'preview' => 'product', 'hint' => 'Related products on product detail page'],
        ] as $row)
        <div class="mb-3">
            <label class="form-label fw-semibold">{{ $row['label'] }}</label>
            <select name="{{ $row['key'] }}" class="form-select pi-fit-select" data-preview="{{ $row['preview'] }}" style="max-width:360px">
                @foreach($fitOptions as $val => $label)
                <option value="{{ $val }}" @selected(($pi[$row['key']] ?? 'contain') === $val)>{{ $label }}</option>
                @endforeach
            </select>
            <div class="form-text">{{ $row['hint'] }}</div>
        </div>
        @endforeach
    </div>

    <div class="col-lg-5">
        <div class="pi-preview-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-eye me-1"></i> Column Preview</h6>

            @foreach([
                ['id' => 'home', 'label' => 'Home Page', 'class' => 'pi-preview-home', 'cols' => (int) ($pi['home_columns'] ?? 6), 'fit' => $pi['home_image_fit'] ?? 'contain'],
                ['id' => 'category', 'label' => 'Category Page', 'class' => 'pi-preview-category', 'cols' => (int) ($pi['category_columns'] ?? 6), 'fit' => $pi['category_image_fit'] ?? 'contain'],
                ['id' => 'product', 'label' => 'Product Page', 'class' => 'pi-preview-product', 'cols' => (int) ($pi['product_columns'] ?? 6), 'fit' => $pi['product_image_fit'] ?? 'contain'],
            ] as $block)
            <div class="mb-3 {{ $block['class'] }}" id="piPreviewWrap-{{ $block['id'] }}">
                <div class="small fw-semibold">{{ $block['label'] }}</div>
                <div class="pi-preview-bar" id="piPreviewBar-{{ $block['id'] }}">
                    @for($i = 1; $i <= $block['cols']; $i++)
                    <div class="pi-preview-seg">{{ $i }}</div>
                    @endfor
                </div>
                <div class="small text-muted">Image Fit: <span id="piPreviewFit-{{ $block['id'] }}">{{ ucfirst($block['fit']) }}</span></div>
            </div>
            @endforeach

            <hr>

            <h6 class="fw-bold mb-2">Image Fit Examples</h6>
            <div class="d-flex gap-3">
                <div class="text-center">
                    <div class="pi-fit-example pi-fit-contain">Contain</div>
                    <div class="small text-muted mt-1">Full image visible</div>
                </div>
                <div class="text-center">
                    <div class="pi-fit-example pi-fit-cover">Cover</div>
                    <div class="small text-muted mt-1">Fills box, may crop</div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    function renderBar(id, cols) {
        const bar = document.getElementById('piPreviewBar-' + id);
        if (!bar) return;
        bar.innerHTML = '';
        for (let i = 1; i <= cols; i++) {
            const seg = document.createElement('div');
            seg.className = 'pi-preview-seg';
            seg.textContent = String(i);
            bar.appendChild(seg);
        }
    }

    document.querySelectorAll('.pi-col-select').forEach(function (sel) {
        sel.addEventListener('change', function () {
            renderBar(sel.dataset.preview, parseInt(sel.value, 10) || 6);
        });
    });

    document.querySelectorAll('.pi-fit-select').forEach(function (sel) {
        sel.addEventListener('change', function () {
            const el = document.getElementById('piPreviewFit-' + sel.dataset.preview);
            if (el) el.textContent = sel.value === 'cover' ? 'Cover' : 'Contain';
        });
    });
})();
</script>
@endpush