@extends('tienda/layout')
@section('contenido')
<!-- Navbar Start -->
<!-- Navbar Start -->
    <style>
        @media (max-width: 400px) {
            .fntzise {
                font-size: 10px;
            }
            .fntziseh5 {
                font-size: 15px;
            }
            .fntzisehabel {
                font-size: 10px;
            }
        }
    </style>
    <div class="container-fluid mb-5">
        <div class="row border-top px-xl-5">
            <div class="col-lg-3 d-none d-lg-block">
                <a class="btn shadow-none d-flex align-items-center justify-content-between text-white w-100 color-principal" data-toggle="collapse" href="#navbar-vertical" style="height: 65px; margin-top: -1px; padding: 0 30px; background-color: #ffffff;">
                    <h6 class="m-0">Categorias</h6>
                    <i class="fa fa-angle-down text-dark"></i>
                </a>
                <nav class="collapse show navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0" id="navbar-vertical">
                    <div class="navbar-nav w-100 overflow-hidden" style="height: 410px">
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link" data-toggle="dropdown" >Subcategoría <i class="fa fa-angle-down float-right mt-1"></i></a>
                            <div class="dropdown-menu position-absolute border-0 rounded-0 w-100 m-0" >
                                @foreach ($subcategorias as $subcategoria)
                                <form action="{{ route('filtro') }}" method="POST" id="form-{{ $subcategoria->codigo_prsu }}">
                                    @csrf
                                    <a href="#" class="dropdown-item" onclick="document.getElementById('form-{{ $subcategoria->codigo_prsu }}').submit(); return false;">
                                    {{ $subcategoria->nombre_prsu }}</a>
                                    <input type="hidden" name="subcategoria[]" value="{{ $subcategoria->codigo_prsu }}">
                                </form>
                                @endforeach
                            </div>
                        </div>
                        @foreach ($categorias as $categoria)
                        <form action="{{ route('filtro') }}" method="POST" id="form-{{ $categoria->codigo_prca }}">
                            @csrf
                            <a href="#" class="nav-item nav-link" onclick="document.getElementById('form-{{ $categoria->codigo_prca }}').submit(); return false;">
                            {{ $categoria->nombre_prca }}</a>
                            <input type="hidden" name="categoria[]" value="{{ $categoria->codigo_prca }}">
                        </form>
                        @endforeach
                    </div>
                </nav>
            </div>
            <div class="col-lg-9">
                <nav class="navbar navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-0">
                    <a href="{{ route('index')}} " class="text-decoration-none d-block d-lg-none">
                        <h1 class="m-0 display-5 font-weight-semi-bold"><img alt="logo" class="logo_empresa" width="50"><span class="nombre_empresa"></span></h1>
                    </a>
                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                        <div class="navbar-nav mr-auto py-0">
                            <a href="{{ route('index')}}" class="nav-item nav-link active">Inicio</a>
                            <a href="{{ route('catalogo')}}" class="nav-item nav-link">Tienda</a>
                            <a href="{{ route('carrito')}}" class="nav-item nav-link">Carrito</a>
                            <a href="{{ route('eventos')}}" class="nav-item nav-link">Eventos</a>
                            <a href="https://elblogdelauto.com" class="nav-item nav-link">Nosotros</a>
                            <a href="{{ route('contacto')}}" class="nav-item nav-link">Contacto</a>
                        </div>
                        <div class="navbar-nav ml-auto py-0">
                            @if(Auth::check())
                            <a href="{{ route('home')}}" class="nav-item nav-link">Panel de control</a>
                            @else
                            <a href="{{ route('login')}}" class="nav-item nav-link">Acceso</a>
                            <a href="{{ route('register')}}" class="nav-item nav-link">Registro</a>
                            @endif
                        </div>
                    </div>
                </nav>
                <div id="header-carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        @foreach ($banners as $index => $banner)
                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}" style="width: 100%; height: 100%;">
                            <img class="img-fluid" src="{!! asset('assets/store/img/banners/' . $banner->imagen_bann ) !!}" alt="Image" style="width: 100%; height: 100%;">
                            <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                                <div class="p-3" style="max-width: 100%;">
                                    <h4 class="text-light text-uppercase font-weight-medium mb-3">{{ $banner->titulo_bann }}</h4>
                                    <h3 class="display-4 text-white font-weight-semi-bold mb-4">{{ $banner->subtitulo_bann }}</h3>
                                    @if ($banner->url_bann)
                                    <a href="{{ $banner->url_bann }}" class="btn btn-light py-2 px-3">Ver más</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <a class="carousel-control-prev" href="#header-carousel" data-slide="prev">
                        <div class="btn btn-dark" style="width: 45px; height: 45px;">
                            <span class="carousel-control-prev-icon mb-n2"></span>
                        </div>
                    </a>
                    <a class="carousel-control-next" href="#header-carousel" data-slide="next">
                        <div class="btn btn-dark" style="width: 45px; height: 45px;">
                            <span class="carousel-control-next-icon mb-n2"></span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Navbar End -->
    <!-- Featured Start -->
    <div class="container-fluid pt-2">
        <div class="row px-xl-5 pb-3">
            <div class="col-lg-3 col-md-6 col-sm-12 pb-1 col-6">
                <div class="d-flex align-items-center border mb-4" style="padding: 15px;">
                    <h1 class="fa fa-check color-principal-color m-0 mr-3"></h1>
                    <h5 class="font-weight-semi-bold m-0 fntzise">Calidad de producto</h5>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 pb-1 col-6">
                <div class="d-flex align-items-center border mb-4" style="padding: 15px;">
                    <h1 class="fa fa-shipping-fast color-principal-color m-0 mr-2"></h1>
                    <h5 class="font-weight-semi-bold m-0 fntzise">Envío por paqueteria</h5>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 pb-1 col-6">
                <div class="d-flex align-items-center border mb-4" style="padding: 15px;">
                    <h1 class="fas fa-exchange-alt color-principal-color m-0 mr-3"></h1>
                    <h5 class="font-weight-semi-bold m-0 fntzise">Garantía</h5>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 pb-1 col-6">
                <div class="d-flex align-items-center border mb-4" style="padding: 15px;">
                    <h1 class="fa fa-phone-volume color-principal-color m-0 mr-3"></h1>
                    <h5 class="font-weight-semi-bold m-0 fntzise">24/7 Tienda disponible</h5>
                </div>
            </div>
        </div>
    </div>
    <!-- Featured End -->
    <!-- Categories Start -->
    <div class="container-fluid pt-5">
        <div class="text-center mb-4">
            <h2 class="section-title px-5"><span class="px-2">Categorías</span></h2>
        </div>
        <div class="row px-xl-5 pb-3">
            @foreach ($categorias as $categoria)
            <div class="col-lg-4 col-md-6 col-6 pb-1">
                <div class="cat-item d-flex flex-column border mb-4" style="padding: 30px;">
                    <p class="text-right fntzisehabel">{{ $categoria->total_productos }} Productos</p>
                    <form action="{{ route('filtro') }}" method="POST" id="form-{{ $categoria->codigo_prca }}">
                        @csrf
                        <a href="#" class="cat-img position-relative overflow-hidden mb-3" onclick="document.getElementById('form-{{ $categoria->codigo_prca }}').submit(); return false;">
                            @if ($categoria->imagen_prca)
                                <img class="img-fluid" src="{!! asset('assets/img/categorias/' . $categoria->imagen_prca ) !!}" alt="categoria">
                            @else
                                <img class="img-fluid" src="{!! asset('assets/img/sinimagen.png' ) !!}" alt="categoria">
                            @endif
                        </a>
                        <input type="hidden" name="categoria[]" value="{{ $categoria->codigo_prca }}">
                        <h5 class="font-weight-semi-bold m-0 fntziseh5">{{ $categoria->nombre_prca }}</h5>
                    </form>
                </div>
            </div>
        @endforeach
        </div>
    </div>
    <!-- Categories End -->
    <!-- Productos en oferta -->
    <div class="container-fluid pt-5">
        <div class="text-center mb-4">
            <h2 class="section-title px-5"><span class="px-2">Productos En Oferta</span></h2>
        </div>
        <div class="row px-xl-5 pb-3">
            @foreach ($productosOfertas as $productoOferta)
            <div class="col-lg-3 col-md-6 col-sm-12 pb-1 col-6">
                <div class="card product-item border-0 mb-4">
                    <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                        @if ($productoOferta->imagen_principal_prod)
                            <a href="{{ route('detalle.producto', $productoOferta->codigo_prod)}}"><img class="img-fluid w-100"  src="{{ asset('assets/img/productos/' . $productoOferta->imagen_principal_prod) }}" alt="producto"></a>
                            @else
                            <a href="{{ route('detalle.producto', $productoOferta->codigo_prod)}}"><img class="img-fluid w-100"  src="{!! asset('assets/img/products.png') !!}" alt="producto"></a>
                        @endif
                    </div>
                    <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                        <h6 class="text-truncate mb-3 fntzisehabel">{{ $productoOferta->nombre_prod }}</h6>
                        <div class="d-flex justify-content-center">
                            <h6 class="fntzisehabel"> {{ "$" . number_format($productoOferta->venta_prod, 2) }}</h6>
                        </div>
                    </div>
                    <div class="card-footer  justify-content-between bg-light border text-center">
                        <a href="{{ route('detalle.producto',$productoOferta->codigo_prod) }}" class="btn btn-sm text-dark p-0 fntzisehabel"><i class="fas fa-eye color-principal-color mr-1"></i>Ver Detalles</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    <!-- Productos en oferta fin -->
    <!-- Subscripcion -->
    <div class="container-fluid my-5  color-principal-encabezado" style="background-color: #ffffff;">
        <div class="row justify-content-md-center py-5 px-xl-5">
            <div class="col-md-6 col-12 py-5">
                <div class="text-center mb-2 pb-2">
                    <h2 class="section-title px-5 mb-3"><span class="bg-secondary px-2">Suscríbete</span></h2>
                    <p>Al suscribirte obtendras nuevas ofertas</p>
                </div>
                <form class="suscribirForm">
                    @csrf
                    <div class="input-group">
                        <input type="email" class="form-control border-white p-4" name="email" placeholder="Ingresa tu correo electrónico">
                        <div class="input-group-append">
                            <button type="submit" class="btn color-principal px-4" style="color: #ffffff">Suscribir</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Subscripcion fin -->
    <!-- Productos nuevos -->
    <div class="container-fluid pt-5">
        <div class="text-center mb-4">
            <h2 class="section-title px-5"><span class="px-2">Productos Nuevos</span></h2>
        </div>
        <div class="row px-xl-5 pb-3">
            <div class="row px-xl-5 pb-3">
                @foreach ($productosNuevos as $productoNuevo)
                <div class="col-lg-3 col-md-6 col-sm-12 pb-1 col-6">
                    <div class="card product-item border-0 mb-4">
                        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                            @if ($productoNuevo->imagen_principal_prod)
                                <a href="{{ route('detalle.producto', $productoNuevo->codigo_prod)}}"><img class="img-fluid w-100"  src="{{ asset('assets/img/productos/' . $productoNuevo->imagen_principal_prod) }}" alt=""></a>
                                @else
                                <a href="{{ route('detalle.producto', $productoNuevo->codigo_prod)}}"><img class="img-fluid w-100"  src="{!! asset('assets/img/products.png') !!}" alt=""></a>
                            @endif
                        </div>
                        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                            <h6 class="text-truncate mb-3 fntzisehabel">{{ $productoNuevo->nombre_prod }}</h6>
                            <div class="d-flex justify-content-center">
                                <h6 class="fntzisehabel"> {{ "$" . number_format($productoNuevo->venta_prod, 2) }}</h6>
                            </div>
                        </div>
                        <div class="card-footer  justify-content-between bg-light border text-center">
                            <a href="{{ route('detalle.producto',$productoNuevo->codigo_prod) }}" class="btn btn-sm text-dark p-0 fntzisehabel"><i class="fas fa-eye color-principal-color mr-1"></i>Ver Detalles</a>
                        </div>
                    </div>
                </div>
                @endforeach
        </div>
    </div>
    <!-- Productos nuevos fin -->
@endsection
