@extends('layouts.app')

@section('seoheader')
    {!! $seo ?? '' !!}
@endsection
@section('aditional-header')
    <style>
        @media only screen and (min-width: 1200px) and (max-width: 1599px) {
            .custom-container-pro {
                padding: 0 50px !important;
            }
        }

        @media only screen and (min-width: 1600px) {
            .custom-container-pro {
                max-width: 1920px;
                padding: 0 150px;
            }
        }
        @media only screen and (min-width: 1800px) {
            .custom-container-pro {
                max-width: 2520px;
                padding: 0 150px;
            }
        }
    </style>
@endsection

@section('content')

    @include('utils.preloader')

    @include('layouts.header')
    <style>
        .single-product .product-content .product-price .regular-price {
            font-size: 15px !important;
        }
    </style>
    <div class="breadcrumb-area mb-4">
        <div class="container-fluid custom-container-pro">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('web') }}">Inicio</a></li>
                    <li class="breadcrumb-item active">OFERTAS IMPACTO</li>
                    {{-- <li class="breadcrumb-item active">CYBER MONDAY</li> --}}
                </ol>
            </nav>
        </div>
    </div>

    @if (!empty($cate))
        @php
            $count = count(
                array_filter($cate, function ($element) {
                    return $element !== null;
                }),
            );

        @endphp
        @if ($count < 7)
            <div class="row" style="place-content: center; margin-bottom:1rem;">
                <div class="col-10  p-0">
                    <img class="w-100" src="{{ asset('portada/of_select_1_1.jpg') }}" alt="">
                </div>
                <div class="col-10"
                    style="background-image: url({{ asset('portada/of_select_2_4.jpg') }});background-position:center;background-size: 135rem;">
                    <!-- <div class="container-fluid custom-container-pro" style="background: #094d9f;"> -->
                    <div class="row" style="padding: 2rem">
                        @if (isset($cate))
                            @foreach ($cate as $c)
                                @if (isset($c->cat_image_url) && $c->cat_image_url != '-')
                                    <div class="col-md-2 ">
                                        <a href="{{ route('ofert', ['id' => $c->id_web_menu]) }}" style="text-align: center">
                                            <img style="width: 8rem!important;
                        height: 8rem!important;
                        border-radius: 42rem!important;
                        object-fit: contain!important;
                        background: #ffffff;
                        box-shadow:  @if ($c->id_web_menu == $id_menu) rgb(255 227 90) 0px 0px 20px 20px @else rgb(112 108 96) 0px 0px 0px 0px #094d9f @endif  ;"
                                                src="{{ $c->cat_image_url }}" alt="{{ $c->subMenu->name }}">
                                            <h5
                                                style="font-weight: 700; margin-top: 1rem; color: #ffffff;filter: drop-shadow(2px 4px 2px black);">
                                                {{ $c->subMenu->name }}</h5>
                                        </a>
                                    </div>
                                @endif
                            @endforeach
                        @endif

                    </div>
                </div>
            </div>
        @else
            <div class="row" style="place-content: center; margin-bottom:1rem;">
                <img style="width:135rem" src="{{ asset('portada/of_select_1_1.jpg') }}" alt="">
            </div>
            <div class="brand-area pt-80 pb-80">
                <div class="container custom-container-pro">
                    <div class="row brand-active"
                        style="background-image: url({{ asset('portada/of_select_2_4.jpg') }});background-position:center;background-size: 135rem;">
                        @foreach ($cate as $c)
                            @if (isset($c->cat_image_url) && $c->cat_image_url != '-')
                                <div class="col-lg-2 mt-2">
                                    <div class="single-brand">
                                        <a href="{{ route('ofert', ['id' => $c->id_web_menu]) }}" style="text-align: center">
                                            <img style="width: 8rem!important;
                                height: 8rem!important;
                                border-radius: 42rem!important;
                                object-fit: contain!important;
                                background:#ffffff;
                                box-shadow:@if ($c->id_web_menu == $id_menu) rgb(255 227 90) 0px 0px 20px 20px @else rgb(112 108 96) 0px 0px 0px 0px #094d9f @endif  ;"
                                                src="{{ $c->cat_image_url }}" alt="{{ $c->subMenu->name }}">
                                            <h6 style="font-weight: 500; margin-top: 1rem; color: #ffffff;">
                                                {{ $c->subMenu->name }}</h6>
                                        </a>
                                    </div>
                                </div>
                            @endif
                        @endforeach
        @endif
        </div>
        </div>
        </div>

    @endif


    <div class="shop-area">
        <div class="custom-container-pro">
            <div class="row">
                @forelse ($products as $ofert)
                    @php
                        $product = $ofert->product;
                    @endphp
                    <div class="col-xl-2 col-md-3 col-6">
                        @include('utils.products.product_item_list', ['prod' => $product])
                    </div>
                @empty
                    <div class="col">
                        <p>No se han encontrado ofertas disponibles por ahora.</p>
                    </div>
                @endforelse
            </div>
            <div class="row justify-content-center">
                <div>{{ $products->withQueryString('pagination::custom') }}</div>
            </div>
        </div>
    </div>

    @include('layouts.brand')

    @include('layouts.newsletter')

    @include('layouts.footer')

    @include('utils.backtop')

@endsection