@extends('layouts.base')

@section('content')

<div class="bg-dark pt-4 pb-5">
    <div class="container pt-2 pb-3 pt-lg-3 pb-lg-4">
        <div class="d-lg-flex justify-content-between pb-3">
            <div class="order-lg-1 pe-lg-4 text-center text-lg-start">
                <h1 class="h3 text-light mb-0">Productos</h1>
            </div>
        </div>
    </div>
</div>


<div class="container pb-5 mb-2 mb-md-4">
    <!-- Toolbar -->
    <div class="bg-light shadow-lg rounded-3 p-4 mt-n5 mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="dropdown me-2">
                <a class="btn btn-outline-secondary dropdown-toggle collapsed" href="#shop-filters" data-bs-toggle="collapse" aria-expanded="false">
                <i class="ci-filter me-2"></i>Filtros</a>
            </div>
            <div class="d-flex">
                {{ $products->appends(request()->query())->links('vendor.pagination.products') }}
            </div>
        </div>
        <!-- Toolbar with expandable filters-->
        <div class="collapse" id="shop-filters" style="">
            <div class="row pt-4">
                <div class="col-lg-4 col-sm-6">
                    <!-- Categories-->
                    <div class="card mb-grid-gutter">
                        <div class="card-body px-4">
                        <div class="widget widget-categories">
                            <h3 class="widget-title">Categoría</h3>
                            <div class="accordion mt-n1">
                                <div class="accordion-item">
                                    <div class="accordion-collapse collapse show" id="clothing" data-bs-parent="#shop-categories">
                                        <div class="accordion-body">
                                            <div class="widget widget-links widget-filter">
                                                <div class="input-group input-group-sm mb-2">
                                                    <select class="form-select flex-shrink-0" id="product-category-id" name="category_id" style="width: 10.5rem;">
                                                        <option value="">Elige una opción</option>
                                                        @foreach ($categories as $category)
                                                            <option
                                                                value="{{$category->id}}"
                                                                @selected(request('category_id') == $category->id)
                                                            >
                                                                {{$category->name}}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <!-- Filter by Brand-->
                    <div class="card mb-grid-gutter">
                        <div class="card-body px-4">
                            <div class="widget widget-categories">
                                <h3 class="widget-title">Marca</h3>
                                <div class="accordion mt-n1">
                                    <div class="accordion-item">
                                        <div class="accordion-collapse collapse show" id="category" data-bs-parent="#shop-brands">
                                            <div class="accordion-body">
                                                <div class="widget widget-links widget-filter">
                                                    <div class="input-group input-group-sm mb-2">
                                                        <select class="form-select flex-shrink-0" id="prodyct-brand" name="brand" style="width: 10.5rem;">
                                                            <option value="">Elige una opción</option>
                                                            @foreach ($brands as $brand)
                                                                <option
                                                                    value="{{$brand->value}}"
                                                                    @selected(request('brand') == $brand->value)
                                                                >
                                                                    {{$brand->value}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center align-items-md-center mx-n2" id="grid-products">
        <!-- 2do PRODUCT ORIGINAL DEL TEMPLATE (para referencia) -->
        @foreach ($products as $product)
            <x-product.product-card :product="$product" />
        @endforeach
    </div>
    <div class="row justify-content-center">
        <div class="col text-center">
            {{ $products->appends(request()->query())->links('vendor.pagination.products') }}
        </div>
    </div>

    <div class="row justify-content-center mb-3">
        <div class="tns-carousel pt-3">
            <div class="tns-carousel-brands">
                <!-- Carousel slides here -->
                <div>
                    <a href="#" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/longi.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="#" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/solis.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="#" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/risen.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="#" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/s5.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="#" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/huawei.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/victron.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/trina.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/growatt.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/znshine.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/unirac.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/tw-solar.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/fronius.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/soluna.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/gosolar.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/pylontech.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/srne.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/yassion.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/zbeny.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/parts-master.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/xpower.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/ultrastart.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/yassion.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
                <div>
                    <a href="" class="d-block bg-white border py-4 py-sm-5 px-2">
                        <img src="{{asset('brands/zbeny.webp')}}" class="d-block mx-auto" style="width: 165px;" alt="Alt text">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Selección de Sucursal -->
<div class="modal fade" tabindex="-1" role="dialog" id="selectQuantityModal" aria-labelledby="selectQuantityModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="selectQuantityModalLabel">Selecciona una Sucursal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="quantitySelectionForm">
                <div class="modal-body">
                    <!-- El formulario se generará dinámicamente aquí -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-md" data-bs-dismiss="modal">Cancelar</button>
                    @if (isset($without_location) == false)
                        <button type="submit" class="btn btn-primary btn-md">Agregar al Carrito</button>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@if (session('message'))
<script>
    Swal.fire({
        position: "center",
        icon: "{{ session('icon') }}",
        title: "{{ session('message') }}",
        showConfirmButton: false,
        timer: 2000,
    });
</script>
@endif

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Filter By Category
        const categorySelect = document.getElementById('product-category-id');

        if (categorySelect) {

            categorySelect.addEventListener('change', function() {
                const categoryId = this.value;
                const searchParams = new URLSearchParams(window.location.search);

                // Actualiza o añade category_id a los parámetros de búsqueda
                searchParams.set('category_id', categoryId);

                // Redirige manteniendo el parámetro de marca si ya estaba establecido
                window.location.href = `${window.location.origin}/productos/?${searchParams.toString()}`;
            });
        }

        // Filter By Brand (Asegúrate de corregir esto para que funcione con la lógica de filtro actualizada)
        const brandSelect = document.getElementById('prodyct-brand');
        brandSelect.addEventListener('change', function() {
            const brand = this.value;
            const searchParams = new URLSearchParams(window.location.search);

            // Actualiza o añade brand a los parámetros de búsqueda
            if(brand) {
                searchParams.set('brand', brand);
            } else {
                searchParams.delete('brand'); // Remueve el parámetro si "Todos" es seleccionado
            }

            // Redirige manteniendo los parámetros existentes
            window.location.href = `${window.location.origin}/productos/?${searchParams.toString()}`;
        });

    })
</script>

@endsection