@php
    use Illuminate\Support\Str;
    use App\Models\ProductSeo;

    // Generate SEO-friendly product URL with category path
    $productSlug = null;
    $seo = ProductSeo::where('external_id', $item['id'])
    ->where('external_cod', base64_encode($item['codigo']))
    ->first();
    if ($seo) {
        $productSlug = $seo->slug;
    }

    $categorySlug = session('current_category_slug');
    $subSlug = session('current_sub_slug');

    if ($productSlug && $categorySlug && $subSlug) {
        // Full SEO URL with category path
        $productUrl = route('website.products.show.category', [
            'categorySlug' => $categorySlug,
            'subSlug' => $subSlug,
            'productSlug' => $productSlug,
        ]);
    } elseif ($productSlug) {
        // Simple SEO URL
        $productUrl = route('website.products.show', ['slug' => $productSlug]);
    } else {
        // Fallback to old URL (will redirect to SEO URL)
        $productUrl = route('website.products.show.old', [
            'id' => $item['id'],
            'cod' => base64_encode($item['codigo']),
        ]);
    }
@endphp
<div class="card h-100" style="background-color: rgb(45, 45, 45); position: relative; overflow: hidden;">
    <div class="product-img text-center" style="position: relative;">

        <a href="{{ $productUrl }}">
            <img src="{{ $item['registros_fotos'][0]['url_foto'] }}" alt="product" class="card-img-top">
        </a>

        {{--  <div class="hover-overlay">
                <button class="btn btn-primary">Agregar al carrito</button>
            </div>  --}}
    </div>
    <form class="card-body text-description-product d-flex flex-column" action="{{ route('website.carrito.add') }}"
        method="POST">
        @csrf
        <h4 class="card-title">
            <a href="{{ $productUrl }}" class="text-description-product2 {{ Route::is('website.home.index') ? 'text-description-product3' : '' }}">
                {{ $item['nombre'] }}

            </a>
        </h4>
        <p class="card-text card-text-product-description">
            <strong>{{ $item['nombre'] }}</strong><br>
            <strong>PARTNUMBER: </strong>{{ $item['part_number'] }}<br>
            {{--  <strong>CÓDIGO: </strong>{{ $item['codigo'] }}<br>  --}}
            <strong>CONDITION: </strong>{{ $item['condicion'] }}<br>
            @if ($item['es_b2b'] === 'SI')
                <strong>AVAILABLE: </strong>
            @else
                <strong>IN STOCK: </strong>
            @endif
            @if ($item['existencias'] == 0 && $item['en_transito'] == 0)
                <span style="font-weight: bold; color: red;">
                    OUT STOCK
                </span>
                @php
                    $out_stock = true;
                @endphp
            @else
                @php
                    $out_stock = false;
                @endphp
                @if ($item['en_transito'] != 0 && $item['existencias'] == 0)
                    Stock in transit
                @else
                    @if ($item['existencias'] >= 300)
                        300+
                    @else
                        {{ $item['existencias'] }}
                    @endif
                    PCS
                @endif
            @endif
            <br>
            @if ($item['ETA'] <= 0)
                @if (!empty($out_stock))
                    <strong>Out Stock</strong>
                @else
                    <strong>In Stock</strong>
                @endif
            @else
                <strong>ETA: </strong>

                {{ $item['ETA'] }} DAYS
            @endif
            <br>

            <strong>MOQ: </strong>{{ $item['MOQ'] }} UNITS<br>
            @if ($item['en_transito'] > 0)
                <strong>IN TRANSIT: </strong>{{ $item['en_transito'] }}<br>
            @endif
            @if (session('usuario_autenticado'))
                <strong>PRICE: </strong>${{ $item['precio'] }}
            @endif
        </p>
        <input type="hidden" name="nombreDB" value="{{ $item['nombre'] }}">
        <input type="hidden" name="imgDB" value="{{ $item['registros_fotos'][0]['url_foto'] }}">
        <input type="hidden" name="precioDB" value="{{ $item['precio'] }}">
        <input type="hidden" name="id" value="{{ $item['id'] }}">
        <input type="hidden" name="piezasDB" value="{{ $item['MOQ'] }}">
        <input type="hidden" name="stockDB" value="{{ $item['existencias'] }}">
        <input type="hidden" name="linkDB" value="{{ env('APP_URL') }}">
        <input type="hidden" name="unidadMed" value="pzas">
        <input type="hidden" name="stockDB" value="{{ $item['existencias'] }}">
        <input type="hidden" name="codigoDB" value="{{ $item['codigo'] }}">
        <input type="hidden" name="in_transit" value="{{ $item['en_transito'] }}">
        <div class="mt-auto">
            @if ($item['existencias'] > 0 || $item['en_transito'] > 0)
                <button
                    class="btn btn-dark w-100 auth-action-autenticate {{ Route::is('website.home.index') ? 'button-add-product-shared' : '' }}"
                    type="submit">
                    <img src="{{ asset('website/img/home/carrito_compras_blanco.svg') }}" width="7%"> Add to cart
                </button>
            @else
                <div style="margin-bottom: 25px">
                    Process not available due to lack of stock or in transit
                </div>
            @endif
            <!-- Botón (dentro del loop de productos) -->
            @if (session('usuario_autenticado'))
                <button type="button" class="btn mt-2 w-100 auth-action-autenticate btn-notify"
                    onclick="abrirModal('{{ $item['id'] }}', '{{ $item['es_b2b'] }}', '{{ $item['precio'] }}', '{{ $item['codigo'] }}', '{{ $item['existencias'] }}')"
                    style="background-color:#3d6ce4; color: #fff;" data-bs-toggle="modal">
                    <i class="fa-solid fa-bell fa-lg"></i> Notify
                </button>
            @endif
        </div>
    </form>
</div>

<!-- Modal -->
<!-- Modal único -->
<div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form action="{{ route('productos.notify') }}" method="POST" id="form-notificacion">
            @csrf
            <div class="modal-content bg-dark text-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="notifyModalLabel">Notifications</h5>
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close"
                        onclick="cerrarModal()">X</button>
                </div>

                <div class="modal-body">
                    <!-- Hidden inputs -->
                    <input type="hidden" name="id_product_notify" id="id_product_notify">
                    <input type="hidden" name="preci_notify" id="preci_notify">
                    <input type="hidden" name="b2b_notify" id="b2b_notify">
                    <input type="hidden" name="codigo" id="codigo">
                    <input type="hidden" name="id_ntf_quantity" id="id_ntf_quantity">
                    <input type="hidden" name="id_ntf_price" id="id_ntf_price">
                    <input type="hidden" name="existencias" id="existencias">


                    <div class="row">
                        <h5 class="text-center mt-1 mb-4">
                            Select one or more options to configure your notifications.
                        </h5>

                        <!-- Notificación por precio -->
                        <div class="col-12 col-sm-6">
                            <p class="mb-3"><strong>Notification by price</strong></p>
                            <p>You will be notified when this product goes on sale.</p>

                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="check_preci_notify"
                                    name="check_preci_notify">
                                <label class="form-check-label" for="check_preci_notify">
                                    Notify when it drops in price
                                </label>
                            </div>
                        </div>

                        <!-- Notificación por stock -->
                        <div class="col-12 col-sm-6">
                            <p class="mb-3"><strong>Stock notification</strong></p>
                            <p>Enter a number. You will be notified when stock is equal or greater.</p>

                            <div class="row">
                                <div class="col-5">
                                    <input type="number" class="form-control" id="cantidad_notify"
                                        name="cantidad_notify" step="1">
                                </div>
                                {{-- @if ($notifications['quantity']) --}}
                                <div class="col-7">
                                    <div class="form-check form-switch" id="check">
                                        <input class="form-check-input" type="checkbox"
                                            id="check_disabled_notify_stock" name="check_disabled_notify_stock">
                                        <label class="form-check-label" for="check_disabled_notify_stock">
                                            Disable this notification
                                        </label>
                                    </div>
                                </div>
                                {{-- @endif --}}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="modal-footer">
                    <div class="w-100 d-flex justify-content-end">
                        <button type="submit" id="btn-notificacion" class="btn btn-outline-light btn-notificacion"
                            data-form="form-notificacion">
                            <i class="fa fa-paper-plane" aria-hidden="true"></i> Save
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
    async function abrirModal(id, b2b, precio, codigo, existencias) {

        const ruta = '/notificacion-show?' + 'id=' + id + '&b2b=' + b2b;

        const res = await fetch(ruta);
        const data = await res.json();

        // Datos del botón
        var codigo = codigo;
        var idNtfQuantity = data.id_ntf_quantity ?? '';
        var idNtfPrice = data.id_ntf_price ?? '';
        var priceChecked = data.price ? '1' : '0';
        var quantity = data.quantity ?? '';
        var existencias = existencias ?? 1;
        var checkquantity = false;
        if (quantity != 0) {
            checkquantity = true;
        }

        // Rellenar inputs hidden
        document.getElementById('id_product_notify').value = id;
        document.getElementById('preci_notify').value = precio;
        document.getElementById('b2b_notify').value = b2b;
        document.getElementById('codigo').value = codigo;
        document.getElementById('id_ntf_quantity').value = idNtfQuantity;
        document.getElementById('id_ntf_price').value = idNtfPrice;
        document.getElementById('existencias').value = existencias;


        // Checkbox precio
        document.getElementById('check_preci_notify').checked = (priceChecked === "1");

        // Stock
        var cantidadInput = document.getElementById('cantidad_notify');
        cantidadInput.value = quantity || "";
        // cantidadInput.min = existencias || 1;

        // Si ya existe notificación de stock, habilitar el "disable"
        document.getElementById('check').style.display = checkquantity ? 'block' : 'none';

        let modal = new bootstrap.Modal(document.getElementById('notifyModal'));
        modal.show();
    }

    function cerrarModal() {
        let modalEl = document.getElementById('notifyModal');
        let modal = bootstrap.Modal.getInstance(modalEl); // si ya está abierto

        document.getElementById('id_product_notify').value = '';
        document.getElementById('preci_notify').value = '';
        document.getElementById('b2b_notify').value = '';
        document.getElementById('codigo').value = '';
        document.getElementById('id_ntf_quantity').value = '';
        document.getElementById('id_ntf_price').value = '';
        document.getElementById('existencias').value = '';
        document.getElementById('check_preci_notify').checked = false;
        document.getElementById('cantidad_notify').value = '';

        document.getElementById('check').style.display = "none";

        modal.hide();
    }


    // document.addEventListener('DOMContentLoaded', function() {
    //     var notifyModal = document.getElementById('notifyModal');
    //     notifyModal.addEventListener('show.bs.modal', function(event) {
    //         var button = event.relatedTarget;

    //         // Datos del botón
    //         var id = button.getAttribute('data-id');
    //         var precio = button.getAttribute('data-precio');
    //         var b2b = button.getAttribute('data-b2b');
    //         var codigo = button.getAttribute('data-codigo');
    //         var idNtfQuantity = button.getAttribute('data-idntfquantity');
    //         var idNtfPrice = button.getAttribute('data-idntfprice');
    //         var priceChecked = button.getAttribute('data-pricechecked');
    //         var quantity = button.getAttribute('data-quantity');
    //         var existencias = button.getAttribute('data-existencias');
    //         var checkquantity = false;
    //         if (quantity != 0) {
    //             checkquantity = true;
    //         }

    //         // Rellenar inputs hidden
    //         document.getElementById('id_product_notify').value = id;
    //         document.getElementById('preci_notify').value = precio;
    //         document.getElementById('b2b_notify').value = b2b;
    //         document.getElementById('codigo').value = codigo;
    //         document.getElementById('id_ntf_quantity').value = idNtfQuantity;
    //         document.getElementById('id_ntf_price').value = idNtfPrice;
    //         document.getElementById('existencias').value = existencias;


    //         // Checkbox precio
    //         document.getElementById('check_preci_notify').checked = (priceChecked === "1");

    //         // Stock
    //         var cantidadInput = document.getElementById('cantidad_notify');
    //         cantidadInput.value = quantity || "";
    //         // cantidadInput.min = existencias || 1;

    //         // Si ya existe notificación de stock, habilitar el "disable"
    //         var checkDisableStock = document.getElementById('check_disabled_notify_stock');
    //         checkDisableStock.checked = false;
    //         checkDisableStock.closest('.form-check').style.display = checkquantity ? 'block' : 'none';
    //     });
    // });
</script>

<script>
    $(document).ready(function() {
        $(".btn-notificacion").on("click", function(event) {
            event.preventDefault();

            const $btn = $(this);
            const formId = $btn.data("form");
            const $form = $("#" + formId);

            if ($form.length === 0) {
                console.error("Formulario no encontrado:", formId);
                return;
            }

            $btn.prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Sending...');
            $form.submit();
        });
    });
</script>