@extends($layout ?? 'layouts.guest.general')

@section('main_content')
    {{-- nav --}}
    <section class="page-title" style="background-image: url({{ Storage::url($selectedSector->banner) }})" id="about">
        <h1 class="d-none">Our Exclusive Products - ITG Group</h1>
        <div class="auto-container">
            <ul class="bread-crumb clearfix">
                <li><a href="{{ route('home.index') }}">{{ __('messages.home') }} </a></li>
                <li>{{ __('messages.products') }} </li>
                <li>{{ $selectedSector->title }} </li>
            </ul>
            <h2>{{ __('messages.title-products') }} </h2>
        </div>
    </section>

    {{-- SECTION OF PRODUCTS --}}
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">
                <!-- Sidebar Side -->
                <div class="sidebar-side left-sidebar col-lg-4 col-md-12 col-sm-12">
                    <aside class="sidebar sticky-top">
                        <!-- Service Widget -->
                        <div class="sidebar-widget service-widget">
                            <div class="widget-content bg-main-color">
                                <div class="sidebar-title">
                                    <h2 class="_h4 color-green1">{{ __('messages.sectors') }} </h2>
                                </div>
                                <ul class="service-list">


                                    @foreach ($productSectors as $sector)
                                        <li class="current"><a
                                                class="{{ $sector->id == $selectedSector->id ? 'active-sector' : '' }}"
                                                href="{{ $sector->publicUrl() }}">{{ $sector->title }}
                                            </a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <!-- Support Widget -->
                        <div class="sidebar-widget support-widget">
                            <div class="support-content">
                                <div class="title-box">
                                    <h2 class="_h4 text-white">{{ __('messages.product-title-form') }} </h2>
                                    <div class="text">{{ __('messages.product-subtitle-form') }} </div>
                                </div>
                                <!-- Support Form -->
                                <div class="support-form">
                                    @livewire('contact-form.contact-products-post', ['dataDivision' => $globalDivision])
                                </div>
                            </div>
                        </div>
                        <!-- Download Widget -->
                        @if (!empty($selectedSector->getCurrentCatalogue()->url))
                            <div class="sidebar-widget download-widget">
                                <div class="widget-content">
                                    <div class="sidebar-title">
                                        <h2 class="_h4 color-green1">{{ __('messages.download-now') }}</h2>
                                    </div>
                                    <ul class="download-list">
                                        <li>
                                            <a data-toggle="modal" href="#" data-target="#catalogueContact">
                                                {{ __('messages.catalogue') }} <span class="icon flaticon-edit"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @else
                            <div class="sidebar-widget download-widget">
                                <div class="widget-content download-widget">
                                    <div class="sidebar-title">
                                        <h4>{{ __('messages.download-now') }}</h4>
                                        <img src="{{ asset('images/products/img-catalog.jpeg') }}" alt="">
                                    </div>
                                    <ul class="download-list">
                                        <li>
                                            <a href="https://textilecatalogues.group-itg.com" class="button-main"
                                                target="_blank">
                                                {{ __('messages.btn-go-cataloge') }}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @endif


                    </aside>
                </div>
                <!-- Content Side -->
                <div class="content-side right-sidebar col-lg-8 col-md-12 col-sm-12">
                    <div class="service-detail">
                        <div class="inner-box">
                            <div class="image">
                                <img src="{{ Storage::url($selectedSector->main_image) }}" alt="main image" />
                            </div>
                            <div class="lower-content">

                                <!-------------- Content ---------------------------------------------->

                                @foreach ($sidebarGroups as $group)
                                    @include('frontend.content-section.section-wrapper', [
                                        'group' => $group,
                                    ])
                                @endforeach

                                <!-------------- End Content ---------------------------------------------->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @foreach ($bottomGroups as $group)
        @include('frontend.content-section.section-wrapper', [
            'group' => $group,
        ])
    @endforeach
    
    
        <!-- show modal catalogue  -->
        @livewire('contact-form.catalogue-contact-form', ['product_name' => $selectedSector->title, 'product_type' => 'product', 'dataDivision' => $globalDivision, 'urlCatalogue' => $selectedSector->getCurrentCatalogue()->url ?? null])


@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/products/show-products.css') }}">
@endpush