@extends('frontend.layouts.layout')
@push('title')
    | Lista de marcas
@endpush
@include('frontend.partials.header')
@section('content')
    <div class="breadcrumb-option {{-- d-none --}} d-xl-block d-md-block">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb__links">
                        <a href="{{ url('/'. $campain['slug']) }}"><i class="fa fa-home"></i> Inicio</a>
                        <span>Marcas</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Categories Section Begin -->
    <section class="categories">
        <div class="container-fluid">

<div class="row justify-content-center">
            @forelse ($marcas as $marca)
            
            @if($marca->state)

                <div class="col-lg-4 col-md-4 col-sm-4 mt-3" style="height: 260px; max-width:360px;min-width:360px;">
                    @if (empty($marca->imageSignedUrl))
                        <div class="content shadow-1-strong rounded categories__item bg-image justify-content-center" style="height: 260px; max-width:325px;min-width:325px;">
                                <a href="{{ route('listProducts', ['slug' => $campain['slug'], 'marca' => $marca->name, 'category' => $category,  'id' => $marca->uuidKey, 'uuidMark' => $id]) }}" title="Ver productos">
                                    <div class="content-overlay"></div>
                                    {{-- <img class="content-image w-100 cover-img" src="{{ $marca->imageSignedUrl }}" /> --}}
                                    <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                                        <div class="d-flex justify-content-center align-items-center h-100">
                                        <p class="text-white mb-0 h4">{{ $marca->name }}</p>
                                        </div>
                                    </div>
                                    <div class="content-details fadeIn-right">
                                        <p class="h5">{{ $marca->description }}</p>
                                    </div>
                                </a>
                        </div>
                    @else
                    <div class="content rounded categories__item bg-image justify-content-center" style="max-width:325px; min-width:325px;" >
                                <a href="{{ route('listProducts', ['slug' => $campain['slug'], 'marca' => $marca->name, 'category' => $category,  'id' => $marca->uuidKey, 'uuidMark' => $id]) }}" title="Ver productos">
                                    <div class="content-overlay"></div>
                                    <img class="content-image shadow-1-strong w-100 cover-img" height="260px" width="360px" src="{{ $marca->imageSignedUrl }}" />

                                    <div class="content-details fadeIn-right">
                                        <p class="h5">{{ $marca->description }}</p>
                                    </div>
                                </a>

                        </div>


                    @endif

                                {{-- <div class="bg-image ripple ripple shadow-1-strong rounded categories__item" data-mdb-ripple-color="light">
                                    <img src="{{ $marca->imageSignedUrl }}" class="w-100 cover-img" />
                                <a href="{{ route('listProducts', ['slug' => $campain['slug'], 'marca' => $marca->name, 'category' => $category,  'id' => $marca->uuidKey, 'uuidMark' => $id]) }}" title="Ver productos">
                                        <div class="mask content-product d-flex align-items-center" style="background-color: rgba(0, 0, 0, 0.6)">
                                            <div class="h-50 pl-2">
                                                <p class="text-white mb-0 h4 w-100 mt-5 text-center">{{ $marca->name }}</p>
                                                <p class="text-white h6 description w-100">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nisi ducimus dolore aspernatur magnam natus molestias error nesciunt sapiente ullam libero necessitatibus repellendus est quam recusandae dicta, doloremque rem expedita!</p>
                                            </div>

                                        </div>
                                        <div class="hover-overlay">
                                            <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
                                        </div>
                                    </a>
                                </div> --}}
                            </div>
            @endif
                        @empty

                        @endforelse


        </div>
    </section>
    <!-- Categories Section End -->
@endsection
@push('footer')
    @include('frontend.partials.footer')
@endpush
@push('js')
    <script !src="">
        $('#datosUsuarios').modal('show');
    </script>
@endpush