@if (!empty($products))
    @foreach ($products as $product)
        <div class="modal fade" id="productModalId_{{ $product['id'] }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered product__modal" role="document">
                <div class="modal-content">
                    <div class="product__modal-wrapper p-relative">
                        <div class="product__modal-close p-absolute">
                            <button data-bs-dismiss="modal"><i class="fal fa-times"></i></button>
                        </div>
                        <div class="product__modal-inner">
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="product__modal-box">
                                        <div class="tab-content" id="modalTabContent">
                                            <div class="tab-pane fade show active" id="nav1" role="tabpanel"
                                                aria-labelledby="nav1-tab">
                                                <div class="product__modal-img w-img">
                                                    @foreach ($product['registros_fotos'] as $fot)
                                                        <img src="{{ $fot['url_foto'] }}" alt="1">
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="nav2" role="tabpanel"
                                                aria-labelledby="nav2-tab">
                                                <div class="product__modal-img w-img">
                                                    <img src="assets/img/quick-view/quick-view-2.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="nav3" role="tabpanel"
                                                aria-labelledby="nav3-tab">
                                                <div class="product__modal-img w-img">
                                                    <img src="assets/img/quick-view/quick-view-3.jpg" alt="">
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="nav4" role="tabpanel"
                                                aria-labelledby="nav4-tab">
                                                <div class="product__modal-img w-img">
                                                    <img src="assets/img/quick-view/quick-view-4.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <ul class="nav nav-tabs" id="modalTab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="nav1-tab" data-bs-toggle="tab"
                                                    data-bs-target="#nav1" type="button" role="tab"
                                                    aria-controls="nav1" aria-selected="true">
                                                    <img src="assets/img/quick-view/quick-nav-1.jpg" alt="">
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="nav2-tab" data-bs-toggle="tab"
                                                    data-bs-target="#nav2" type="button" role="tab"
                                                    aria-controls="nav2" aria-selected="false">
                                                    <img src="assets/img/quick-view/quick-nav-2.jpg" alt="">
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="nav3-tab" data-bs-toggle="tab"
                                                    data-bs-target="#nav3" type="button" role="tab"
                                                    aria-controls="nav3" aria-selected="false">
                                                    <img src="assets/img/quick-view/quick-nav-3.jpg" alt="">
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="nav4-tab" data-bs-toggle="tab"
                                                    data-bs-target="#nav4" type="button" role="tab"
                                                    aria-controls="nav4" aria-selected="false">
                                                    <img src="assets/img/quick-view/quick-nav-4.jpg" alt="">
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="product__modal-content">
                                        <h4><a href="product-details.html">{{ $product['nombre'] }}</a>
                                        </h4>
                                        <div class="product__stock mb-30">
                                            <ul>
                                                <li>
                                                    <span class="sku mr-10">PARTNUMBER:</span>
                                                    <span>{{ $product['part_number'] }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="product__price">
                                            <span><strong>Price: </strong>${{ $product['precio'] }}</span>
                                        </div>
                                        <div class="product__modal-des mt-20 mb-15">
                                            <h6>Description:</h6>
                                            <span>{{ $product['desc'] }}</span>
                                        </div>
                                        <div class="product__modal-form">
                                            <form action="#">
                                                <div class="pro-quan-area d-lg-flex align-items-center">
                                                    <div class="product-quantity mr-20 mb-25">
                                                        <div class="cart-plus-minus p-relative"><input type="text"
                                                                value="1" /></div>
                                                    </div>
                                                    <div class="pro-cart-btn mb-25">
                                                        <button class="cart-btn" type="submit">Add to
                                                            cart</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="product__stock mb-30">
                                            <ul>
                                                <li>
                                                    <span class="sku mr-10">CODE:</span>
                                                    <span>{{ $product['codigo'] }}</span>
                                                </li>
                                                <li>
                                                    <span class="cat mr-10">MOQ:</span>
                                                    <span>{{ $product['MOQ'] }}</span>
                                                </li>
                                                <li>
                                                    <span class="tag mr-10">AVAILABLE:</span>
                                                    <span>{{ $product['existencias'] }} units</span>
                                                </li>
                                                <li>
                                                    <span class="tag mr-10">IN TRANSIT:</span>
                                                    <span>{{ $product['en_transito'] }} units</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endif