@extends('backEnd.layouts.master')

@section('title','Theme & Colors')

@section('content')
<div class="container-fluid py-3 theme-colors-admin">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-1"><i class="fas fa-palette me-2 text-success"></i>Theme Color Studio</h4>
            <p class="text-muted small mb-0">
                <strong>৩টি সহজ ধাপ:</strong> ① Preset বেছে নিন → ② Color box click করুন → ③ Save দিন।
                Hex code জানতে হবে না।
            </p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('admin.settings.theme') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-th-large me-1"></i>Theme Layout</a>
            <a href="{{ route('admin.settings.homepage') }}" class="btn btn-outline-success btn-sm"><i class="fas fa-home me-1"></i>Homepage</a>
            <a href="{{ url('/') }}" target="_blank" class="btn btn-outline-primary btn-sm"><i class="fas fa-eye me-1"></i>Live Site</a>
        </div>
    </div>

    @include('backEnd.settings.partials.theme-preset-bar')

    <form method="POST" action="{{ route('admin.settings.theme.colors.save') }}" id="themeColorsForm">
        @csrf
        <div class="row g-3">
            <div class="col-lg-7">
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-success text-white fw-bold">
                        <i class="fas fa-swatchbook me-2"></i>Main Colors — মূল রং
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            @foreach([
                                ['primary', 'Primary Color', 'মূল রং', 'Buttons, price, menu'],
                                ['primary_dark', 'Primary Dark', 'গাঢ় রং', 'Hover, top bar'],
                                ['primary_light', 'Primary Light', 'হালকা রং', 'Background tint'],
                                ['secondary', 'Secondary', 'দ্বিতীয় রং', 'Success badges'],
                                ['accent', 'Accent / Sale', 'সেল/অ্যালার্ট', 'Discount badge'],
                            ] as [$key, $label, $labelBn, $desc])
                            @include('backEnd.settings.partials.theme-color-field', [
                                'colorKey' => $key,
                                'label' => $label,
                                'labelBn' => $labelBn,
                                'default' => $defaults[$key] ?? '#65971e',
                                'colors' => $colors,
                                'colClass' => 'col-md-6',
                                'desc' => $desc,
                            ])
                            @endforeach
                        </div>
                    </div>
                </div>

                @include('backEnd.settings.partials.theme-color-sections')
            </div>

            <div class="col-lg-5">
                <div class="card shadow-sm border-0 sticky-top" style="top:80px">
                    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-eye me-2"></i>Live Preview</span>
                        <a href="{{ url('/') }}" target="_blank" class="btn btn-sm btn-outline-primary py-0 px-2">
                            <i class="fas fa-external-link-alt me-1"></i>Open Site
                        </a>
                    </div>
                    <div class="card-body p-0" style="overflow:hidden">
                        <div id="colorPreview" style="display:flex;flex-direction:column">
                            <div id="prev_topbar" style="height:28px;padding:0 16px;display:flex;align-items:center;font-size:11px">📦 Announcement Bar</div>
                            <div id="prev_header" style="height:44px;padding:0 16px;display:flex;align-items:center;font-size:14px;font-weight:700;border-bottom:1px solid #eee">🌿 Store Header</div>
                            <div id="prev_nav" style="height:36px;padding:0 16px;display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600">
                                <span>Home</span><span>Products</span><span>Contact</span>
                            </div>
                            <div id="prev_hero" style="height:48px;padding:12px 16px;font-size:12px;display:flex;align-items:center">Hero / Banner</div>
                            <div id="prev_trust" style="height:32px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:11px">✓ Free Delivery · ✓ Original</div>
                            <div id="prev_catstrip" style="height:30px;padding:0 16px;display:flex;align-items:center;gap:10px;font-size:10px">● Cat1 ● Cat2</div>
                            <div id="prev_body" style="flex:1;min-height:36px;padding:10px 16px;font-size:11px">
                                <div id="prev_title" style="font-weight:700;margin-bottom:6px">Section Title</div>
                                <div id="prev_product" style="display:inline-block;padding:8px 12px;border-radius:6px;border:1px solid #eee;font-size:10px">
                                    Product · <span id="prev_price" style="font-weight:700">৳500</span>
                                    <span id="prev_btn" style="display:inline-block;margin-left:8px;padding:2px 8px;border-radius:4px;font-size:9px">Buy</span>
                                </div>
                                <div id="prev_pd_actions" style="margin-top:8px;display:flex;flex-wrap:wrap;gap:4px">
                                    <span id="prev_pd_buy" style="padding:3px 8px;border-radius:4px;font-size:9px;font-weight:700">Buy</span>
                                    <span id="prev_pd_cart" style="padding:3px 8px;border-radius:4px;font-size:9px;font-weight:700">Cart</span>
                                    <span id="prev_pd_phone" style="padding:3px 8px;border-radius:4px;font-size:9px;font-weight:700">Phone</span>
                                    <span id="prev_pd_wa" style="padding:3px 8px;border-radius:4px;font-size:9px;font-weight:700">WA</span>
                                </div>
                            </div>
                            <div id="prev_footer" style="padding:14px 16px;font-size:12px">
                                <strong style="display:block;margin-bottom:4px">Footer</strong>
                                <div id="prev_footer_social" style="display:flex;gap:6px;margin:8px 0">
                                    <span class="prev-social-dot" style="width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px">f</span>
                                </div>
                                <span id="prev_footer_link">Footer links</span>
                                <div style="margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.15);font-size:10px;text-align:center">© Copyright</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="theme-colors-sticky-bar">
            <div class="d-flex gap-2 flex-wrap align-items-center justify-content-between">
                <span class="text-muted small"><i class="fas fa-info-circle me-1"></i>Save না করলে website এ change দেখাবে না</span>
                <div class="d-flex gap-2">
                    <a href="{{ url('/') }}" target="_blank" class="btn btn-outline-success">
                        <i class="fas fa-eye me-1"></i> Preview Site
                    </a>
                    <button type="submit" class="btn btn-success btn-lg px-4">
                        <i class="fas fa-save me-2"></i>Save Colors
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/theme-colors-admin.css') }}">
@endpush

@push('scripts')
<script>
function syncThemeColorField(key) {
    var txt = document.getElementById('txt_' + key);
    var clr = document.getElementById('clr_' + key);
    if (!txt || !clr) return;
    if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(txt.value)) {
        clr.value = txt.value;
    }
    updatePreview();
}

function updatePreview() {
    var get = function (k) {
        var el = document.getElementById('clr_' + k);
        return el && el.value ? el.value : '#888888';
    };

    var prevTop = document.getElementById('prev_topbar');
    var prevHeader = document.getElementById('prev_header');
    var prevNav = document.getElementById('prev_nav');
    var prevHero = document.getElementById('prev_hero');
    var prevTrust = document.getElementById('prev_trust');
    var prevCatstrip = document.getElementById('prev_catstrip');
    var prevBody = document.getElementById('prev_body');
    var prevTitle = document.getElementById('prev_title');
    var prevProduct = document.getElementById('prev_product');
    var prevPrice = document.getElementById('prev_price');
    var prevBtn = document.getElementById('prev_btn');
    var prevFooter = document.getElementById('prev_footer');

    if (prevTop) {
        prevTop.style.background = get('topbar_bg');
        prevTop.style.color = get('topbar_text');
    }
    if (prevHeader) {
        prevHeader.style.background = get('header_bg');
        prevHeader.style.color = get('header_text');
    }
    if (prevNav) {
        prevNav.style.background = get('nav_bg');
        prevNav.style.color = get('nav_text');
    }
    if (prevHero) {
        prevHero.style.background = 'linear-gradient(135deg,' + get('hero_bg1') + ',' + get('hero_bg2') + ')';
    }
    if (prevTrust) {
        prevTrust.style.background = get('trust_bg');
        prevTrust.style.color = get('text_color');
    }
    if (prevCatstrip) {
        prevCatstrip.style.background = get('catstrip_bg');
        prevCatstrip.style.color = get('text_color');
    }
    if (prevBody) {
        prevBody.style.background = get('body_bg');
        prevBody.style.color = get('text_color');
    }
    if (prevTitle) prevTitle.style.color = get('title_color');
    if (prevProduct) {
        prevProduct.style.background = get('card_bg');
        prevProduct.style.borderColor = get('border_color');
        prevProduct.style.color = get('text_color');
    }
    if (prevPrice) prevPrice.style.color = get('primary');
    if (prevBtn) {
        prevBtn.style.background = get('primary');
        prevBtn.style.color = get('btn_text');
    }

    ['prev_pd_buy', 'prev_pd_cart'].forEach(function (id) {
        var el = document.getElementById(id);
        if (!el) return;
        el.style.background = get('pd_buy_cart_bg');
        el.style.color = get('pd_buy_cart_text');
    });

    var prevPdPhone = document.getElementById('prev_pd_phone');
    var prevPdWa = document.getElementById('prev_pd_wa');
    if (prevPdPhone) {
        prevPdPhone.style.background = get('pd_phone_btn_bg');
        prevPdPhone.style.color = get('pd_phone_btn_text');
    }
    if (prevPdWa) {
        prevPdWa.style.background = get('pd_whatsapp_btn_bg');
        prevPdWa.style.color = get('pd_whatsapp_btn_text');
    }
    if (prevFooter) {
        prevFooter.style.background = get('footer_bg');
        prevFooter.style.color = get('footer_text');
        var heading = prevFooter.querySelector('strong');
        if (heading) heading.style.color = get('footer_heading');
        var link = document.getElementById('prev_footer_link');
        if (link) link.style.color = get('footer_link');
        document.querySelectorAll('.prev-social-dot').forEach(function (dot) {
            dot.style.background = get('footer_social_bg');
            dot.style.color = get('footer_social_icon');
        });
    }
    document.querySelectorAll('.section-dot').forEach(function (dot) {
        var key = dot.getAttribute('data-dot-key');
        if (key) dot.style.color = get(key);
    });
}

document.getElementById('themeColorsForm')?.addEventListener('submit', function () {
    document.querySelectorAll('[id^="txt_"]').forEach(function (txt) {
        syncThemeColorField(txt.id.replace('txt_', ''));
    });
});
document.querySelectorAll('[id^="clr_"]').forEach(function (el) {
    el.addEventListener('input', updatePreview);
});
updatePreview();
</script>
@endpush