@extends('backEnd.layouts.master')

@section('title', 'Homepage Settings')

@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-1"><i class="fas fa-home me-2 text-success"></i>Homepage Settings</h4>
            <p class="text-muted small mb-0">Structured layout — section on/off per active theme. Demo install buttons only affect their theme data.</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            @if($canManageAllThemes ?? false)
            <form method="POST" action="{{ route('admin.settings.homepage.demo-cloth') }}" class="d-inline"
                  onsubmit="return confirm('Top Ten Mart style demo install করবেন? Categories, products, banners, blog — সব replace/update হবে।');">
                @csrf
                <button type="submit" class="btn btn-dark btn-sm"><i class="fas fa-tshirt me-1"></i>Install Cloth Demo</button>
            </form>
            <form method="POST" action="{{ route('admin.settings.homepage.demo-jewelry') }}" class="d-inline"
                  onsubmit="return confirm('Kunjo Jewellers style demo install করবেন? Categories, products, banners, gold prices — সব replace/update হবে।');">
                @csrf
                <button type="submit" class="btn btn-sm text-white" style="background:#6d1c2a"><i class="fas fa-gem me-1"></i>Install Jewelry Demo</button>
            </form>
            <form method="POST" action="{{ route('admin.settings.homepage.demo-gadget') }}" class="d-inline"
                  onsubmit="return confirm('Gadget Monkey BD style demo install করবেন? Categories, products, banners, brands — সব replace/update হবে।');">
                @csrf
                <button type="submit" class="btn btn-sm text-white" style="background:#f97316"><i class="fas fa-mobile-alt me-1"></i>Install Gadget Demo</button>
            </form>
            @endif
            <a href="{{ route('admin.settings.theme.colors') }}" class="btn btn-outline-secondary btn-sm">Theme Colors</a>
            <a href="{{ route('admin.page-builder') }}" class="btn btn-outline-primary btn-sm">Drag and Drop Builder</a>
            <a href="{{ url('/') }}" target="_blank" class="btn btn-success btn-sm"><i class="fas fa-external-link-alt me-1"></i>View Site</a>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="alert alert-info py-2 mb-3">
        <i class="fas fa-palette me-1"></i>
        Editing homepage for <strong>{{ ucfirst($activeTheme ?? 'organic') }}</strong> theme.
        @if($canManageAllThemes ?? false)
        Switch theme in <a href="{{ route('admin.settings.theme') }}">Theme Settings</a> to configure another theme.
        @else
        Theme layout locked — color ও section settings এখান থেকেই customize করুন।
        @endif
    </div>

    <form method="POST" action="{{ route('admin.settings.homepage.save') }}" enctype="multipart/form-data">
        @csrf

        <div class="row g-3">

            {{-- Layout mode --}}
            <div class="col-lg-4">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-success text-white fw-bold">
                        <i class="fas fa-layer-group me-2"></i>Homepage Layout
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3 p-3 border rounded {{ ($settings['layout_mode'] ?? 'structured') === 'structured' ? 'border-success bg-light' : '' }}">
                            <input class="form-check-input" type="radio" name="layout_mode" id="mode_structured" value="structured"
                                {{ ($settings['layout_mode'] ?? 'structured') === 'structured' ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="mode_structured">
                                Structured (Organic Style) — Recommended
                            </label>
                            <div class="small text-muted mt-1">Hero sidebar + slider → Categories → Trending → Combo</div>
                        </div>
                        <div class="form-check p-3 border rounded {{ ($settings['layout_mode'] ?? '') === 'builder' ? 'border-primary bg-light' : '' }}">
                            <input class="form-check-input" type="radio" name="layout_mode" id="mode_builder" value="builder"
                                {{ ($settings['layout_mode'] ?? '') === 'builder' ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="mode_builder">
                                Drag and Drop Builder
                            </label>
                            <div class="small text-muted mt-1">Drag and Drop Builder দিয়ে custom homepage — content save থাকলে সেটাই দেখাবে</div>
                        </div>

                        <hr>

                        <label class="form-label fw-semibold">Slider Speed (ms)</label>
                        <input type="number" name="slider_interval" class="form-control" min="2000" max="15000" step="500"
                            value="{{ old('slider_interval', $settings['slider_interval'] ?? 4500) }}">
                        <small class="text-muted">4500 = 4.5 seconds per slide</small>
                    </div>
                </div>
            </div>

            {{-- Section toggles --}}
            <div class="col-lg-4">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-light fw-bold">
                        <i class="fas fa-toggle-on me-2"></i>Sections On/Off
                    </div>
                    <div class="card-body">
                        @foreach([
                            ['show_trust_bar', 'Trust Bar (on/off — customize in Website Settings → Trust Bar)'],
                            ['show_categories', 'Top Categories (Fashion tiles)'],
                            ['show_featured_collections', 'Featured Collections (Men / Women tabs)'],
                            ['show_promo_banners', 'Promo Cards (3 banners after categories)'],
                            ['show_spotlight_grid', 'Spotlight Grid (3×2 product promo cards — Gadget theme)'],
                            ['show_trending', 'Top Trending Products'],
                            ['show_new_arrivals', 'New Arrival Products'],
                            ['show_formal_ethnic', 'Formal Wear + Ethnic Wear blocks'],
                            ['show_journal', 'From the Journal (Blog)'],
                            ['show_gift_cards', 'Gift Card section'],
                            ['show_combo', 'Combo Offers (Organic theme)'],
                            ['show_popular', 'Popular Products'],
                            ['show_bestsellers', 'Best Sellers'],
                            ['show_gold_price', "Today's Gold Price (Jewelry theme)"],
                            ['show_testimonials', 'Testimonials'],
                            ['show_order_tracking', 'Order Tracking Bar'],
                        ] as [$key, $label])
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="{{ $key }}" id="{{ $key }}" value="1"
                                {{ !empty($settings[$key]) ? 'checked' : '' }}>
                            <label class="form-check-label" for="{{ $key }}">{{ $label }}</label>
                        </div>
                        @endforeach

                        @php
                            $catStyles = collect(config('homepage-category-styles', []))
                                ->filter(fn ($meta, $key) => in_array($activeTheme ?? 'organic', $meta['themes'] ?? [], true));
                            $currentCatStyle = old('category_display_style', $settings['category_display_style'] ?? 'freshio_pills');
                        @endphp
                        @if($catStyles->isNotEmpty())
                        <div class="mt-3 p-3 border rounded bg-white">
                            <label class="form-label fw-semibold mb-1" for="category_display_style">
                                <i class="fas fa-th-large me-1 text-success"></i>Category Section Style
                            </label>
                            <select name="category_display_style" id="category_display_style" class="form-select form-select-sm">
                                @foreach($catStyles as $styleKey => $styleMeta)
                                <option value="{{ $styleKey }}" {{ $currentCatStyle === $styleKey ? 'selected' : '' }}>
                                    {{ $styleMeta['label'] ?? $styleKey }}
                                </option>
                                @endforeach
                            </select>
                            @php $styleHelp = $catStyles->get($currentCatStyle)['description'] ?? ''; @endphp
                            <small class="text-muted d-block mt-2" id="categoryStyleHelp">{{ $styleHelp }}</small>
                        </div>
                        @endif

                        <hr>

                        <div class="row g-2">
                            <div class="col-4">
                                <label class="form-label small fw-semibold">Trending</label>
                                <input type="number" name="trending_limit" class="form-control form-control-sm" min="4" max="24"
                                    value="{{ old('trending_limit', $settings['trending_limit'] ?? 8) }}">
                            </div>
                            <div class="col-4">
                                <label class="form-label small fw-semibold">New Arrival</label>
                                <input type="number" name="new_arrival_limit" class="form-control form-control-sm" min="4" max="24"
                                    value="{{ old('new_arrival_limit', $settings['new_arrival_limit'] ?? 8) }}">
                            </div>
                            <div class="col-4">
                                <label class="form-label small fw-semibold">Featured</label>
                                <input type="number" name="featured_limit" class="form-control form-control-sm" min="4" max="24"
                                    value="{{ old('featured_limit', $settings['featured_limit'] ?? 8) }}">
                            </div>
                            <div class="col-4">
                                <label class="form-label small fw-semibold">Combo</label>
                                <input type="number" name="combo_limit" class="form-control form-control-sm" min="4" max="24"
                                    value="{{ old('combo_limit', $settings['combo_limit'] ?? 8) }}">
                            </div>
                            <div class="col-4">
                                <label class="form-label small fw-semibold">Popular</label>
                                <input type="number" name="popular_limit" class="form-control form-control-sm" min="4" max="24"
                                    value="{{ old('popular_limit', $settings['popular_limit'] ?? 8) }}">
                            </div>
                            <div class="col-4">
                                <label class="form-label small fw-semibold">Gift Card</label>
                                <input type="number" name="gift_card_limit" class="form-control form-control-sm" min="4" max="24"
                                    value="{{ old('gift_card_limit', $settings['gift_card_limit'] ?? 6) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Hero sliders --}}
            <div class="col-lg-4">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-header bg-warning text-dark fw-bold d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-images me-2"></i>Hero Sliders</span>
                        <a href="{{ route('admin.banners.create') }}?position=hero" class="btn btn-sm btn-dark py-0">
                            <i class="fas fa-plus me-1"></i>Add
                        </a>
                    </div>
                    <div class="card-body p-0" style="max-height:420px;overflow-y:auto">
                        @forelse($heroBanners as $banner)
                        <div class="d-flex align-items-center gap-2 p-3 border-bottom">
                            <img src="{{ asset($banner->image) }}" alt="" class="rounded" style="width:72px;height:40px;object-fit:cover;flex-shrink:0">
                            <div class="flex-grow-1 min-width-0">
                                <div class="fw-semibold small text-truncate">{{ $banner->title ?: 'Untitled' }}</div>
                                <div class="d-flex gap-1 mt-1">
                                    <span class="badge {{ $banner->status ? 'bg-success' : 'bg-secondary' }}">{{ $banner->status ? 'Active' : 'Off' }}</span>
                                    <span class="badge bg-light text-dark border">#{{ $banner->sort_order }}</span>
                                </div>
                            </div>
                            <a href="{{ route('admin.banners.edit', $banner->id) }}" class="btn btn-sm btn-outline-primary py-0 px-2" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                        @empty
                        <div class="p-4 text-center text-muted">
                            <i class="fas fa-image fa-2x mb-2 opacity-50"></i>
                            <p class="small mb-2">No hero slider yet</p>
                            @if(\App\Services\DemoHeroBannerService::hasDemoAssets())
                            <button type="submit"
                                    formaction="{{ route('admin.settings.homepage.demo-sliders') }}"
                                    class="btn btn-sm btn-success mb-2">
                                <i class="fas fa-magic me-1"></i>Load Demo Sliders (Ready)
                            </button>
                            @endif
                            <a href="{{ route('admin.banners.create') }}?position=hero" class="btn btn-sm btn-outline-success d-block mx-auto" style="max-width:180px">Upload Custom</a>
                        </div>
                        @endforelse
                    </div>
                    <div class="card-footer bg-light">
                        <div class="d-flex flex-wrap gap-2 mb-2">
                            @if(\App\Services\DemoHeroBannerService::hasDemoAssets())
                            <button type="submit"
                                    formaction="{{ route('admin.settings.homepage.demo-sliders') }}"
                                    class="btn btn-sm btn-success">
                                <i class="fas fa-magic me-1"></i>Load Demo Sliders
                            </button>
                            @if($heroBanners->count() > 0)
                            <button type="submit"
                                    formaction="{{ route('admin.settings.homepage.demo-sliders') }}"
                                    name="replace"
                                    value="1"
                                    class="btn btn-sm btn-outline-warning"
                                    onclick="return confirm('Existing hero sliders replace হবে। Continue?')">
                                <i class="fas fa-sync me-1"></i>Replace Demo
                            </button>
                            @endif
                            @endif
                            <a href="{{ route('admin.banners.create') }}?position=hero" class="btn btn-sm btn-outline-dark">
                                <i class="fas fa-upload me-1"></i>Upload New
                            </a>
                        </div>
                        <div class="small text-muted">
                            <strong>Easy change:</strong> Edit icon → image/title/link change → Save.
                            <a href="{{ route('admin.banners.index') }}">All Banners →</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        @include('backEnd.settings.partials.homepage-promo-cards')

        <div class="mt-4 d-flex gap-2 flex-wrap">
            <button type="submit" class="btn btn-success btn-lg px-5">
                <i class="fas fa-save me-2"></i>Save Homepage Settings
            </button>
            <a href="{{ url('/') }}" target="_blank" class="btn btn-outline-success btn-lg">
                <i class="fas fa-eye me-2"></i>Preview Frontend
            </a>
        </div>
    </form>

</div>

@endsection

@push('scripts')
<script>
document.querySelectorAll('input[name="layout_mode"]').forEach(function (radio) {
    radio.addEventListener('change', function () {
        document.querySelectorAll('input[name="layout_mode"]').forEach(function (r) {
            r.closest('.form-check').classList.remove('border-success', 'border-primary', 'bg-light');
        });
        if (this.checked) {
            this.closest('.form-check').classList.add(this.value === 'structured' ? 'border-success' : 'border-primary', 'bg-light');
        }
    });
});

(function () {
    var select = document.getElementById('category_display_style');
    var help = document.getElementById('categoryStyleHelp');
    if (!select || !help) return;
    var descriptions = @json(collect(config('homepage-category-styles', []))->mapWithKeys(fn ($meta, $key) => [$key => $meta['description'] ?? '']));
    select.addEventListener('change', function () {
        help.textContent = descriptions[this.value] || '';
    });
})();
</script>
@endpush