@extends('frontend.layouts.layout')

@push('title')
    | Categorias
@endpush
@include('frontend.partials.header')
@section('content')


{{--    <div class="breadcrumb-option">--}}
{{--        <div class="container">--}}
{{--            <div class="row">--}}
{{--                <div class="col-lg-12">--}}
{{--                    <div class="breadcrumb__links">--}}
{{--                        <span>Productos</span>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    <!-- Categories Section Begin -->
    {{-- {{ $campain }} --}}
    <section class="categories mt-5 mt-md-5 mt-sm-2">
        <div class="container-fluid w-100">
            <div class="row justify-content-center">
                @forelse ($campain['categories'] as $category)
                    @if($category->state)
                    <div class="col-lg-4 col-md-4 {{-- col-sm-4 --}} col-6" style="height: 300px;width: 335px;">
                        <div class=" bg-image ripple ripple shadow-1-strong rounded categories__item" data-mdb-ripple-color="light" style="height: 90%;">
                            <img src="{{ $category->imageSignedUrl }}" class="cover-img" style="width:100%" />
                            <a  href="{{ route('getMarcas', ['slug' => $campain['slug'], 'category' => $category->name, 'id' => $category->uuidKey]) }}" title="Ver marcas">
                                <div class="mask" style="background-color: rgba(0, 0, 0, 0.3)">
                                    <div class="d-flex justify-content-center align-items-center h-100 pl-2">
                                        <p class="text-white mb-0 h6 text-center">{{ $category->name }}</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>
        </div>
    </section>
    <!-- Categories Section End -->
@endsection
@push('footer')
    @include('frontend.partials.footer')
@endpush
@push('js')

<script>
    @if (Session::has('success'))
        toastr.success('Bienvenid@ al {{ $campain['name'] }} ', 'Aproveche los descuentos que tenemos para usted');
    @endif
    $('#datosUsuarios').modal('show');
</script>
@endpush