{% extends "base.html" %}
{% load static %}
<title>{% block title %}Portfolio{% endblock %}</title>
{% block content %}

<section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary" 
    data-overlay-dark="8" 
    data-background="{% static 'img/banner/5.png' %}">
    <div class="container text-center mb-5">
        <h1>Our <span class="font-weight-800 text-primary ">Portfolios</span></h1>
        <ul class="list-unstyled">
            <li><a href="/">Home</a></li>
            <li>Our Portfolios</li>
        </ul>
    </div>
</section>

<section>
    <div class="container-fluid">
        <div class="row mt-n1-9">

            <!-- Sidebar -->
          <div class="col-lg-3 mt-1-9 order-2 order-lg-1 ">
            <div class="service-sidebar me-xxl-1-9 bg-light">

                <h2 style="text-align:center;">
                    <span class="font-weight-800 text-primary">Portfolios</span>
                </h2>


                <div class="mb-2-9 widget sidebar-widget" style="padding:0.8rem;">
                {% if categories %}
                <ul class="cetegory p-0 list-unstyled mb-0">
                    
                    {% for c in categories %}
                    <li class="mb-2">
                    <a href="#" class="project-filter bg-secondary" data-id="{{ c.id }}">
                        <span class="text-white">{{ c.name }}</span>
                        <i class="ti-angle-right link-icon"></i>
                    </a>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="text-center text-muted mb-0">No categories available.</p>
                {% endif %}
                </div>
   
                </div>
                
                    <div class="widget bg-secondary p-0">
                        <div class="banner-wrapper">
                            <img src="{% static 'img/service/small_img/16.png' %}" class="border-top-radius-10" alt="...">
                            <div class=" p-3 position-relative text-center">
                           
                                <h4 class="mb-3 text-white">How Can We Help?</h4>
                                <ul class="text-center list-unstyled mb-0">
                                    <li class="text-white mb-2"><i class="fa fa-phone small text-white me-2"></i><a href="#" class="text-white">9010632610</a></li>
                                    <li class="text-white"><i class="fa fa-envelope-open small text-white me-2"></i><a href="#" class="text-white">abcgopi123@gmail.com</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
             </div>
        


            <!-- Projects Section -->
            <div class="col-lg-9 mt-1-9 order-1 order-lg-2">
                <div class="row" id="project-container">
                    {% include "project_grid.html" %}
                </div>
            </div>
            
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('.project-filter').click(function(e){
    e.preventDefault();
    let id = $(this).data('id');

    $.ajax({
        url: "/ajax/filter-portfolios/",
        type: "GET",
        data: { category_id: id },
        success: function(res){
            $("#project-container").html(res.html);
        },
        error: function(xhr){
            console.error("AJAX Error:", xhr.responseText);
            alert("Failed to load projects. Check console for details.");
        }
    });
});

});
</script>

{% endblock %}