@extends('layouts.app')

@section('seoheader')
    {!! $seo ?? '' !!}
@endsection

@section('content')

    @if (!is_null($modal))
        <div class="modal fade" id="ModalAddPubliced" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body p-1">
                        <a href="{{ $modal->redirect_url }}" target="_blank" rel="noopener noreferrer" class="card-img">
                            <!-- Añadir dimensiones para evitar el cambio de diseño al cargar la imagen -->
                            <img src="{{ $modal->rm_url }}" class="img-fluid" width="800" height="450">
                        </a>
                        <button style="position: absolute; top: 0; right: 0; bottom: 0; height: 39px;" type="button"
                                class="close text-white border p-2 rounded" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @include('utils.preloader')

    @include('layouts.header')

    <div class="page-body">

        @include('layouts.sliders', ['sliders' => $sliders])

        @if ($stream != [])
            @include('layouts.stream_home', [$stream])
        @endif

        @if (count($new_products) > 5)
            <!-- Establecer min-height y min-width para mantener espacio para el contenido dinámico -->
            <div class="container-fluid custom-container my-3" style="min-height: 500px;">
                <div class="d-flex justify-content-between border-bottom">
                    <h2 class="text-impacto font-weight-bold">Nuevos Productos</h2>
                    <a href="{{ route('products_new') }}" class="text-impacto font-weight-bold mt-3">ver todo <i class="fal fa-chevron-right"></i></a>
                </div>
                <div class="product-items">
                    <div class="d-flex product-active-4">
                        @foreach ($new_products as $prod)
                            <div class="p-2" style="min-width: 300px; min-height: 450px;">
                                @include('utils.products.product_item_list', ['product' => $prod])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- Reserva espacio con `min-height` para evitar cambios de diseño -->
        <div style="min-height: 50px;">
            @include('layouts.banner_line', ['banners' => $lines[0]])
        </div>

        @if (isset($box_products['prods'][0]))
            <div style="min-height: 400px;">
                @include('layouts.line_products', [
                    'title' => $box_products['title'][0],
                    'title_url' => $box_products['url'][0],
                    'products' => $box_products['prods'][0],
                ])
            </div>
        @endif

        <div style="min-height: 50px;">
            @include('layouts.banner_line', ['banners' => $lines[1]])
        </div>

        @if (isset($box_products['prods'][2]))
            <div style="min-height: 400px;">
                @include('layouts.line_products', [
                    'title' => $box_products['title'][2],
                    'title_url' => $box_products['url'][2],
                    'products' => $box_products['prods'][2],
                ])
            </div>
        @endif

        <div style="min-height: 50px;">
            @include('layouts.banner_line', ['banners' => $lines[2]])
        </div>

        @if (isset($box_products['prods'][4]))
            <div style="min-height: 400px;">
                @include('layouts.line_products', [
                    'title' => $box_products['title'][4],
                    'title_url' => $box_products['url'][4],
                    'products' => $box_products['prods'][4],
                ])
            </div>
        @endif

        <div style="min-height: 50px;">
            @include('layouts.banner_line', ['banners' => $lines[3]])
        </div>

        @include('layouts.brand')

        @include('layouts.mapa')

        @include('layouts.newsletter')
    </div>

    @include('layouts.footer')

    @include('utils.backtop')

@endsection