@extends('layouts.web')
@section('main')
<div class="breadcrumb-area breadcrumb-img bg-img" data-bg="{{ asset('images/cabeceras/'.$cabecera->imagen) }}">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-wrap">
                    <nav aria-label="breadcrumb">
                        <h3 class="breadcrumb-title">Productos {{  isset($sobrepedido) ? "de Sobrepedido" : "" }}</h3>
                        <ul class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="{{  route('index') }}"><i class="fa fa-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Productos</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="shop-main-wrapper section-padding">
    <div class="container">
        <div class="row">
            @if ($campania_sobrepedido || $campania_pedido)
            <!-- sidebar area start -->
            <div class="col-lg-3 order-2 order-lg-1">
                <aside class="sidebar-wrapper">
                    <form action="{{ isset($sobrepedido) ? route('sobrepedido') : route('productos') }}" method="GET" id="search_products">
                        <div class="sidebar-single">
                            <h6 class="sidebar-title">Categorías</h6>
                            <div class="sidebar-body">
                                <ul class="checkbox-container search-list">
                                    @if (isset($sobrepedido))
                                    @foreach ($categorias_sobrepedido as $item)
                                    <li>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" value="{{ $item->id }}" {{ isset($_GET['categoria']) && in_array($item->id, $_GET['categoria']) ? "checked" : "" }} name="categoria[]" id="categoria{{ $item->id }}" onclick="document.getElementById('search_products').submit();">
                                            <label class="custom-control-label" for="categoria{{ $item->id }}">{{ $item->nombre }}</label>
                                        </div>
                                    </li>
                                    @endforeach
                                    @else
                                    @foreach ($categorias as $item)
                                    <li>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" value="{{ $item->id }}" {{ isset($_GET['categoria']) && in_array($item->id, $_GET['categoria']) ? "checked" : "" }} name="categoria[]" id="categoria{{ $item->id }}" onclick="document.getElementById('search_products').submit();">
                                            <label class="custom-control-label" for="categoria{{ $item->id }}">{{ $item->nombre }}</label>
                                        </div>
                                    </li>
                                    @endforeach
                                    @endif

                                </ul>
                            </div>
                        </div>
                        <div class="sidebar-single">
                            <h6 class="sidebar-title">Colores</h6>
                            <div class="sidebar-body">
                                @foreach ($colores as $item)
                                <label style="background-color: {{ $item->codigo }};" for="color{{ $item->id }}" class="color-option">{!! isset($_GET['color'])&&$item->id==$_GET['color']?'<span class="fa fa-check"></span>':"" !!} </label>
                                <input type="radio" name="color" value="{{ $item->id }}" id="color{{ $item->id }}" class="d-none"  onclick="document.getElementById('search_products').submit();" {{ isset($_GET['color']) && $item->id == $_GET['color'] ? "checked" : "" }} >
                                @endforeach
                            </div>
                        </div>
                    </form>
                    <a href="{{ isset($sobrepedido) ? route('sobrepedido') : route('productos') }}" class="btn btn-success w-100">Limpiar filtros</a>
                </aside>
            </div>
            <!-- sidebar area end -->

            <!-- shop main wrapper start -->
            <div class="col-lg-9 order-1 order-lg-2">
                <div class="shop-product-wrapper">
                    <!-- shop product top wrap start -->
                    <div class="shop-top-bar">
                        <div class="row align-items-center">
                            <div class="col-lg-7 col-md-6 order-2 order-md-1">

                                <div class="top-bar-left">
                                    <div class="product-view-mode">
                                        <a class="active" href="#" data-target="grid-view" data-toggle="tooltip" title="Cuadrícula"><i class="fa fa-th"></i></a>
                                        <a href="#" data-target="list-view" data-toggle="tooltip" title="Lista"><i class="fa fa-list"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="shop-product-wrap grid-view row mbn-30">
                        @foreach ($productos as $item)
                        <div class="col-md-4 col-sm-6 col-6">
                            <!-- product grid start -->
                            <div class="product-item">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)">
                                        <img src="{{ asset('images/productos/'.$item->imagen) }}" alt="{{ $item->nombre }}">
                                    </a>
                                    <div class="button-group">
                                        {{-- <a href="wishlist.html" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart-o"></i></a> --}}
                                        <a href="javascript:void(0)" class="quick_view{{ isset($sobrepedido) ? "2":"" }}" data-producto="{{ $item->id }}"><span data-toggle="tooltip"  title="Vista Rápida"><i class="fa fa-eye"></i></span></a>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <div class="product-caption">
                                        <h6 class="product-name">
                                            <a href="javascript:void(0)">{{ $item->nombre }}</a>
                                        </h6>
                                        <div class="price-box">
                                            {{-- <span class="price-old"><del>$90.00</del></span> --}}
                                            <span class="price-regular">${{ number_format($item->precio,'2','.',',') }}</span>
                                        </div>
                                        <form action="{{ isset($sobrepedido) ? route('agregar_a_carrito_sobrepedido',$item->id) : route('agregar_a_carrito',$item->id) }}" method="POST" class="form">
                                            @csrf
                                            <button type="submit" class="add-to-cart"><i class="fa fa-shopping-cart"></i></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- product grid end -->

                            <!-- product list item end -->
                            <div class="product-list-item">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)">
                                        <img src="{{ asset('images/productos/'.$item->imagen) }}" alt="{{ $item->nombre }}">
                                    </a>
                                    <div class="button-group">
                                        {{-- <a href="wishlist.html" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart-o"></i></a> --}}
                                        <a href="#" data-toggle="modal" data-target="#quick_view{{ isset($sobrepedido) ? "2":"" }}"><span data-toggle="tooltip"  title="Vista Rápida"><i class="fa fa-eye"></i></span></a>
                                    </div>
                                </div>
                                <div class="product-content-list">
                                    <h4 class="product-name"><a href="javascript:void(0)">{{ $item->nombre }}</a></h4>
                                    <div class="price-box">
                                        <span class="price-regular">${{ number_format($item->precio,'2','.',',') }}</span>
                                    </div>
                                    <form action="{{ isset($sobrepedido) ? route('agregar_a_carrito_sobrepedido',$item->id):route('agregar_a_carrito',$item->id) }}" method="POST" class="form">
                                        @csrf
                                        <button type="submit" class="add-to-cart"><i class="fa fa-shopping-cart"></i></a>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>

                    <div class="pagination-area text-center">
                        {{ $productos->appends($_GET)->links('vendor.pagination.bootstrap-4') }}
                    </div>

                </div>
            </div>
            <!-- shop main wrapper end -->
            @endif
        </div>
    </div>
</div>
@endsection