@extends('web.default.layouts.app')

@php
    $catalogTheme = $catalogTheme ?? [];
    $stylePairs = [];
    foreach ($catalogTheme as $k => $v) {
        if (is_string($k) && substr($k, 0, 2) === '--' && is_scalar($v)) {
            $stylePairs[] = $k . ':' . $v;
        }
    }
    $catalogInlineStyle = implode(';', $stylePairs);
@endphp

@section('content')
    <div class="imt-catalog position-relative" style="{{ $catalogInlineStyle }}">
        <div class="imt-catalog__bg" aria-hidden="true"></div>

        @include('web.default.products.includes.catalog_hero', [
            'catalogTheme' => $catalogTheme,
            'showCatalogHeroSearchBar' => false,
        ])

        <div class="imt-catalog__wave" aria-hidden="true">
            <svg viewBox="0 0 1440 120" preserveAspectRatio="none" class="imt-catalog__wave-svg">
                <path fill="currentColor" d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"></path>
            </svg>
        </div>

        <div class="container imt-catalog__body pb-30 pt-5 pt-md-20 position-relative">
            <form method="get"
                  action="{{ url()->current() }}"
                  id="imt-catalog-filters-form"
                  class="imt-catalog__form">

                {{-- البحث أصبح داخل لوحة الفلترة الموحدة (#imt-shop-filters); الهيرو يعرض العنوان فقط في تخطيط الكاتالوج. --}}

                <div class="imt-catalog__toolbar imt-catalog__toolbar--compact imt-glass-panel d-flex align-items-center justify-content-between flex-wrap mb-10">
                    <strong class="font-14 mb-0 font-weight-bold text-gray">{{ $productsCount ?? 0 }} {{ trans('update.products') }}</strong>
                    <span class="font-11 text-muted imt-catalog__toolbar-hint d-lg-none">{{ trans('update.catalog_pull_to_filters') }}</span>
                </div>

                <div class="imt-catalog__filters-panel imt-catalog__filters-panel--simple imt-glass-panel" id="imt-shop-filters">
                    @include('web.default.products.includes.catalog_filters')
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="imt-catalog__grid">
                            @yield('catalog_main')
                        </div>
                    </div>
                </div>
            </form>
        </div>

        @include('web.default.products.includes.catalog_trust_strip')
    </div>

    @include('web.default.products.includes.catalog_quick_view_modal')

@endsection

@push('scripts_bottom')
    <script src="{{ asset('assets/default/js/parts/imt-products-catalog.js') }}?v=20260610a"></script>
    <script src="/assets/default/js/parts/products_lists.min.js"></script>
@endpush
