{% include 'header.html' %}
{% block content %}

                                                </div>


                <!-- Begin Mobile Menu Area -->
                <div class="mobile-menu-area mobile-menu-area-4 d-lg-none d-xl-none col-12">
                    <div class="container"> 
                        <div class="row">
                            <div class="mobile-menu">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Mobile Menu Area End Here -->
            </header>
            <!-- Header Area End Here -->
            <!-- Begin Slider With Banner Area -->
            <div class="slider-with-banner">
                <div class="container">
                    <div class="row">
                        <!-- Begin Slider Area -->
                        <div class="col-lg-8 col-md-8">
                            <div class="slider-area pt-sm-30 pt-xs-30">
                                <div class="slider-active owl-carousel">
                                    <!-- Begin Single Slide Area -->
                                    <div class="single-slide align-center-left animation-style-01 bg-1">
                                        <div class="slider-progress"></div>

                                    </div>
                                    <!-- Single Slide Area End Here -->
                                    <!-- Begin Single Slide Area -->
                                    <div class="single-slide align-center-left animation-style-02 bg-2">
                                        <div class="slider-progress"></div>

                                    </div>
                                    <!-- Single Slide Area End Here -->
                                    <!-- Begin Single Slide Area -->
                                    <div class="single-slide align-center-left animation-style-01 bg-3">
                                        <div class="slider-progress"></div>

                                    </div>

                                    <div class="single-slide align-center-left animation-style-02 bg-4">
                                        <div class="slider-progress"></div>

                                    </div>

                                    <div class="single-slide align-center-left animation-style-02 bg-5">
                                        <div class="slider-progress"></div>

                                    </div>
                                    <!-- Single Slide Area End Here -->
                                </div>
                            </div>
                        </div>
                        <!-- Slider Area End Here -->
                        <!-- Begin Li Banner Area -->
                        <div class="col-lg-4 col-md-4 text-center pt-sm-30 pt-xs-30">
                            <div class="li-banner">
                                <a href="#">
                                    <img src="{{url_for('static',filename='images/banner/1_1.jpg')}}" alt="">
                                </a>
                            </div>
                            <div class="li-banner mt-15 mt-md-30 mt-xs-25 mb-xs-5">
                                <a href="#">
                                    <img src="{{url_for('static',filename='images/banner/1_2.jpg')}}" alt="">
                                </a>
                            </div>
                        </div>
                        <!-- Li Banner Area End Here -->
                    </div>
                </div>
            </div>
            <!-- Slider With Banner Area End Here -->
            <!-- Begin Static Top Area -->
            <div class="static-top-wrap">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="static-top-content mt-sm-30">
                                ELECTRONIC DOCUMENT MANAGEMENT SYSTEM
                                <span>NSIB</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



<div class="container pt-5">
    <!-- Search Box -->
    <div class="mb-4">
        <input type="text" id="searchBox" class="form-control" placeholder="Search for products..." onkeyup="searchProducts()">
    </div>

    <!-- Tab Menu -->
    <ul class="nav nav-tabs" id="tabs" role="tablist">
        {% for category in getpmenu %}
            <li class="nav-item">
                <a class="nav-link" id="category{{ category.id }}-tab" data-toggle="tab" href="#category{{ category.id }}" role="tab" aria-controls="category{{ category.id }}" aria-selected="true">
                    {{ category.name }}
                </a>
            </li>
        {% endfor %}
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="tabsContent">
        {% for category in getpmenu %}
            <div class="tab-pane fade" id="category{{ category.id }}" role="tabpanel" aria-labelledby="category{{ category.id }}-tab">
                <div class="row" id="category{{ category.id }}-products">
                    {% set category_found = false %}
                    {% for product in getdata %}
                        {% if product.folder_id == category.id %}
                            {% set category_found = true %}
                            <div class="col-lg-2 col-md-5 mb-4 product-item" data-title="{{ product.file_title }}" data-category="{{ category.id }}">
                                <div class="card">
                                    <img class="card-img-top"  src="{{ url_for('static', filename='images/pdf.png') }}" alt="Product Image">
                                    <div class="card-body">
                                        <h6 class="card-title">{{ product.file_title }}</h6>
                                          {% for file in files %}
                                        {% if product.id == file.id %}
                                        <a href="{{ file.file_url }}" class="btn btn-primary">Download</a>
                                        <li><a class="links-details" href="{{ file.file_view }}"><i class="fa fa-eye"></i></a></li>
                                        {% endif %}

                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                    {% endfor %}

                    {% if not category_found %}
                        <p>No items available for this category.</p>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<script>
    // Function to search through product titles
    function searchProducts() {
        var input = document.getElementById('searchBox');
        var filter = input.value.toLowerCase();
        var productItems = document.getElementsByClassName('product-item');

        for (var i = 0; i < productItems.length; i++) {
            var title = productItems[i].getAttribute('data-title').toLowerCase();
            var category = productItems[i].getAttribute('data-category');

            if (title.indexOf(filter) > -1) {
                productItems[i].style.display = "";
            } else {
                productItems[i].style.display = "none";
            }
        }
    }
</script>







            <!-- Begin Li's Static Banner Area -->
            <div class="li-static-banner li-static-banner-4 text-center pt-20">
                <div class="container">
                    <div class="row">
                        <!-- Begin Single Banner Area -->
                        <div class="col-lg-6">
                            <div class="single-banner pb-sm-30 pb-xs-30">
                                <a href="#">
                                    <img src="{{url_for('static',filename='images/banner/2323.png')}}" alt="Li's Static Banner">
                                </a>
                            </div>
                        </div>
                        <!-- Single Banner Area End Here -->
                        <!-- Begin Single Banner Area -->
                        <div class="col-lg-6">
                            <div class="single-banner">
                                <a href="#">

                                    <img src="{{url_for('static',filename='images/banner/nsib-2.jpg')}}" alt="Li's Static Banner">
                                </a>
                            </div>
                        </div>
                        <!-- Single Banner Area End Here -->
                    </div>
                </div>
            </div>
            <!-- Li's Static Banner Area End Here -->

<div style="height: 60px;"></div>



            <!-- Begin Li2's Static Banner Area -->
            <div class="li-static-banner li-static-banner-4 text-center pt-20">
                <div class="container">
                    <div class="row">
                        <!-- Begin Single Banner Area -->
                        <div class="col-lg-6">
                            <div class="single-banner pb-sm-30 pb-xs-30">
                                <a href="#">
                                    <img src="{{url_for('static',filename='images/banner/slide5.jpg')}}" alt="Li's Static Banner">
                                </a>
                            </div>
                        </div>
                        <!-- Single Banner Area End Here -->
                        <!-- Begin Single Banner Area -->
                        <div class="col-lg-6">
                            <div class="single-banner">
                                <a href="#">

                                    <img src="{{url_for('static',filename='images/banner/slide6.jpg')}}" alt="Li's Static Banner">
                                </a>
                            </div>
                        </div>
                        <!-- Single Banner Area End Here -->
                    </div>
                </div>
            </div>
            <!-- Li2's Static Banner Area End Here -->

<div style="height: 100px;"></div>
            <!-- Begin Li's Static Home Area -->
            <div class="li-static-home">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Begin Li's Static Home Image Area -->
                            <div class="li-static-home-image"></div>
                            <!-- Li's Static Home Image Area End Here -->
                            <!-- Begin Li's Static Home Content Area -->
                            <div class="li-static-home-content">

                                <p class="schedule">

                                </p>
                                <div class="default-btn">

                                </div>
                            </div>
                            <!-- Li's Static Home Content Area End Here -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- Li's Static Home Area End Here -->


                    </div>
                </div>
            </div>
            <!-- Group Featured Product Area End Here -->



<!-- index-431:47-->
</html>
{% endblock %}
{% include 'footer.html' %}