@extends('layouts.master')
@section('title') @lang('translation.explore-now') @endsection
@section('css')
<!-- Nouislider CSS -->
<link href="{{ URL::asset('build/libs/nouislider/nouislider.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Gestão de Produtos @endslot
@slot('title') Produtos @endslot
@endcomponent

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">Explorar Produtos</h5>
                    <div>
                        <a class="btn btn-success" data-bs-toggle="collapse" href="#collapseExample"><i class="ri-filter-2-line align-bottom"></i> Filtrar</a>
                    </div>
                </div>
                <div class="collapse show" id="collapseExample">
                    <div class="row row-cols-xxl-5 row-cols-lg-3 row-cols-md-2 row-cols-1 mt-3 g-3">
                        <div class="col">
                            <h6 class="text-uppercase fs-12 mb-2">Pesquisar</h6>
                            <input type="text" class="form-control" placeholder="Pesquisar nome do produto" autocomplete="off" id="searchProductList">
                        </div>
                        <div class="col">
                            <h6 class="text-uppercase fs-12 mb-2">Selecione Categoria</h6>
                            <select class="form-control" data-choices name="select-category" data-choices-search-false id="select-category">
                                <option value="">Selecione a categoria</option>
                                @foreach ($categorias as $categoria)
                                    <option value="{{ $categoria->id }}">{{ $categoria->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col">
                            <h6 class="text-uppercase fs-12 mb-2">Selecione Fornecedor</h6>

                            <select class="form-control" data-choices name="select-category" name="select-user" id="select-user">
                                <option value="">Selecione o Fornecedor</option>
                                @foreach($usuarios as $usuario)
                                    <option value="{{ $usuario->id }}">{{ $usuario->name }}</option>
                                @endforeach
                            </select>
                        </div>
                      
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Produtos -->
<div class="row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-1" id="explorecard-list">
    @foreach($produtos as $produto)
    <div class="col-xl-3 col-md-6 product-card {{ in_array($produto->id, $bannedProducts) ? 'produto-banido' : '' }}" data-category-id="{{ $produto->category_id }}" data-user-id="{{ $produto->user_id }}">
    
        <div class="card">
            @php
                $image = 'user-dummy-img.jpg'; 
                if($produto->image){
                    if(Str::startsWith($produto->image, ['http://', 'https://'])) {
                        $image = $produto->image;
                    } else {
                        $image = asset('storage/products/' . $produto->image);
                    }
                } else {
                    $image = asset('storage/' . $image);
                }
            @endphp

            <img src="{{ $image }}" class="card-img-top" alt="{{ $produto->name }}">

            <div class="card-body">
                <h5 class="card-title">{{ $produto->name }}</h5>
                <p class="card-text">{{ Str::limit($produto->description, 60) }}</p>
                <p class="card-text"><strong>Preço:</strong> {{ $produto->price }} kz</p>
                <p class="card-text"><strong>Categoria:</strong> {{ $produto->category->name ?? 'Sem Categoria' }}</p>
            </div>

            <div class="card-footer text-center">
                <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#produtoModal{{ $produto->id }}">
                    Ver Detalhes
                </button>
            </div>
        </div>
    </div>
    <style>
    .product-card .card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .product-card .card-body {
        flex-grow: 1;
    }

    /* Espaçamento vertical maior entre os cards */
    #explorecard-list {
        row-gap: 2rem; /* ajusta o espaçamento vertical */
    }

    .produto-banido {
        opacity: 0.5;
        filter: grayscale(100%);
        pointer-events: none;
    }


    </style>

        <!-- Modal -->
        <div class="modal fade" id="produtoModal{{ $produto->id }}" tabindex="-1" aria-labelledby="produtoModalLabel{{ $produto->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="produtoModalLabel{{ $produto->id }}">{{ $produto->name }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p><strong>Descrição:</strong> {{ $produto->description }}</p>
                        <p><strong>Preço:</strong> {{ $produto->price }} kz</p>
                        <p><strong>Categoria:</strong> {{ $produto->category->name ?? 'Sem Categoria' }}</p>
                        <p><strong>Endereço:</strong> {{ $produto->address }}</p>

                        <p><strong>Usuário:</strong> {{ $produto->user->name ?? 'Sem Usuário' }} - {{ $produto->user->email ?? '' }}</p>

                        <div class="mb-2">
                            <strong>Imagens:</strong><br>
                            @php
                                $images = [
                                    $produto->image,
                                    $produto->image_traseiro,
                                    $produto->image_esquerda,
                                    $produto->image_direita
                                ];
                            @endphp
                            @foreach($images as $img)
                                @php
                                    $imageUrl = $img ? (Str::startsWith($img, ['http://', 'https://']) ? $img : asset('storage/products/' . $img)) : asset('storage/user-dummy-img.jpg');
                                @endphp
                                <img src="{{ $imageUrl }}" width="100">
                            @endforeach
                        </div>

                        @if($produto->video)
                            <div class="mb-2">
                                <strong>Vídeo:</strong><br>
                                @php
                                    $videoUrl = $produto->video;
                                    if($videoUrl && !Str::startsWith($videoUrl, ['http://', 'https://'])) {
                                        $videoUrl = asset('storage/products/' . $videoUrl);
                                    }
                                @endphp
                                <video width="100%" controls>
                                    <source src="{{ $videoUrl }}" type="video/mp4">
                                </video>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="text-center mb-3">
    <button class="btn btn-link text-success mt-2" id="loadmore"><i class="mdi mdi-loading mdi-spin fs-20 align-middle me-2"></i> Load More </button>
</div>

@endsection

@section('script')
<script src="{{ URL::asset('build/libs/nouislider/nouislider.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/wnumb/wNumb.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/apps-nft-explore.init.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>

<!-- Filtro de pesquisa em tempo real -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const searchInput = document.getElementById("searchProductList");
        const categorySelect = document.getElementById("select-category");
        const userSelect = document.getElementById("select-user");
        const productCards = document.querySelectorAll(".product-card");
        const noResultsMessage = document.createElement('p'); // Mensagem de "Nenhum Produto Encontrado"
        noResultsMessage.classList.add('no-results-message');
        noResultsMessage.style.display = 'none'; // Inicialmente escondida
        noResultsMessage.textContent = 'Nenhum produto encontrado.';
        document.getElementById('explorecard-list').appendChild(noResultsMessage); // Coloca após os cards

        // Função para filtrar os produtos
        function filterProducts() {
            const searchTerm = searchInput.value.toLowerCase();
            const selectedCategory = categorySelect.value; // Categoria selecionada (ID da categoria)
            const selectedUser = userSelect.value; // Usuário selecionado (ID do usuário)
            let foundAny = false; // Flag para verificar se encontrou algum produto

            // Iterar sobre os cards de produtos
            productCards.forEach(card => {
                const productName = card.querySelector(".card-title").textContent.toLowerCase();
                const productCategoryId = card.getAttribute('data-category-id'); // ID da categoria do produto
                const productUserId = card.getAttribute('data-user-id'); // ID do usuário do produto

                // Verifica se o nome do produto contém o texto digitado na pesquisa e se a categoria e usuário correspondem
                const matchesSearchTerm = productName.includes(searchTerm);
                const matchesCategory = selectedCategory ? productCategoryId === selectedCategory : true;
                const matchesUser = selectedUser ? productUserId === selectedUser : true;

                if (matchesSearchTerm && matchesCategory && matchesUser) {
                    card.style.display = 'block'; // Exibe o card
                    foundAny = true; // Encontrou pelo menos um produto
                } else {
                    card.style.display = 'none'; // Esconde o card
                }
            });

            // Se nenhum produto for encontrado, exibe a mensagem
            if (foundAny) {
                noResultsMessage.style.display = 'none';
            } else {
                noResultsMessage.style.display = 'block';
            }
        }

        // Filtrando ao digitar no campo de pesquisa
        searchInput.addEventListener("input", filterProducts);

        // Filtrando ao mudar de categoria ou usuário
        categorySelect.addEventListener("change", filterProducts);
        userSelect.addEventListener("change", filterProducts);


        document.addEventListener("DOMContentLoaded", function() {
    const searchInput = document.getElementById("searchProductList");
    const categorySelect = document.getElementById("select-category");
    const typeSelect = document.getElementById("select-type"); // Novo filtro de tipo
    const productCards = document.querySelectorAll(".product-card");

    function filterProducts() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedCategory = categorySelect.value;
        const selectedType = typeSelect.value; // Tipo selecionado
        let foundAny = false;

        productCards.forEach(card => {
            const productName = card.querySelector(".card-title").textContent.toLowerCase();
            const productCategoryId = card.getAttribute('data-category-id');
            const productType = card.getAttribute('data-type'); // Supondo que o tipo seja armazenado aqui

            const matchesSearchTerm = productName.includes(searchTerm);
            const matchesCategory = selectedCategory ? productCategoryId === selectedCategory : true;
            const matchesType = selectedType ? productType === selectedType : true; // Verifica o tipo

            if (matchesSearchTerm && matchesCategory && matchesType) {
                card.style.display = 'block';
                foundAny = true;
            } else {
                card.style.display = 'none';
            }
        });

        if (foundAny) {
            noResultsMessage.style.display = 'none';
        } else {
            noResultsMessage.style.display = 'block';
        }
    }

    searchInput.addEventListener('input', filterProducts);
    categorySelect.addEventListener('change', filterProducts);
    typeSelect.addEventListener('change', filterProducts); // Novo evento de filtro por tipo

    let search = $('#searchProductList').val();
    let category = $('#select-category').val();
    let user = $('#select-user').val();
    let type = $('#select-type').val(); // Novo filtro

    $.ajax({
        url: "{{ route('apps-nft-explore') }}",
        type: 'GET',
        data: {
            search: search,
            category: category,
            user: user,
            type: type, // Passando o tipo para a requisição
        },
        success: function(response) {
            $('#explorecard-list').html(response.productsHTML);
        }
    });
});

    });
</script>
@endsection