{% extends 'common/base.html' %}
{% load static %}
{% block title %}Category Management{% endblock %}
{% block content %}

<!-- ========================= -->
<!--   PAGE LOADER OVERLAY     -->
<!-- ========================= -->
<div id="pageLoader" style="
    display:none;
    position: fixed;
    z-index: 999999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.85);
    text-align:center;
    padding-top:200px;
">
    <div class="spinner-border text-primary" style="width:3rem;height:3rem;" role="status"></div>
    <br><br>
    <span style="font-size:18px;font-weight:600;">Processing...</span>
</div>


<div class="container-fluid" id="container-wrapper">

    <!-- Success Message -->
    {% if messages %}
        {% for msg in messages %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Page Title -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Category Management</h1>
        
    </div>

    <div class="row">

        <!-- ====================== -->
        <!--   CATEGORY ADD FORM    -->
        <!-- ====================== -->
        <div class="col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">Add New Category</h6>
                </div>
                <div class="card-body">

                    <form method="post" action="" enctype="multipart/form-data">
                        {% csrf_token %}

                        <div class="mb-3">
                            <label class="form-label">Category Name</label>
                            <input type="text" class="form-control" name="category_name" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Rank</label>
                            <input type="number" class="form-control" name="ordering" placeholder="1, 2, 3" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-control" name="status" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Category Image</label>
                            <input type="file" class="form-control" name="image">
                        </div>

                        <button type="submit" class="btn btn-primary w-100">Add Category</button>
                    </form>

                </div>
            </div>
        </div>

        <!-- ====================== -->
        <!--      CATEGORY LIST     -->
        <!-- ====================== -->
        <div class="col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">Category List</h6>
                </div>

                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Rank</th>
                                    <th>Status</th>
                                    <th width="120">Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                {% for item in category_list %}
                                <tr>
                                    <td class="text-center">
                                        {% if item.image %}
                                            <img src="{{ item.image.url }}" width="40" class="rounded">
                                        {% else %}
                                            <span class="text-muted">No Image</span>
                                        {% endif %}
                                    </td>

                                    <td>{{ item.name }}</td>
                                    <td class="text-center">{{ item.ordering }}</td>

                                    <td class="text-center">
                                        {% if item.status == True %}
                                            <span class="badge bg-success text-dark">Active</span>
                                        {% else %}
                                            <span class="badge bg-secondary text-white">Inactive</span>
                                        {% endif %}
                                    </td>

                                    <td>
                                        <a href="{% url 'edit_category' item.id %}" 
                                           class="btn btn-sm btn-warning">Edit</a>
 

                                        <a href="{% url 'category_delete' item.id %}" 
                                            data-link="{% url 'category_delete' item.id %}"
                                            class="btn btn-sm btn-danger deleteBtn"> Del </a>

                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted">No categories found</td>
                                </tr>
                                {% endfor %}
                            </tbody>

                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<!-- ============================ -->
<!--   DELETE CLICK LOADER JS     -->
<!-- ============================ -->
  
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const deleteButtons = document.querySelectorAll('.deleteBtn');
        const loader = document.getElementById('pageLoader');

        deleteButtons.forEach(btn => {
            btn.addEventListener('click', function (e) {
                e.preventDefault(); // stop instant redirect

                loader.style.display = 'block';   // show loader

                const url = btn.getAttribute("data-link");

                // delay 3 seconds before going to delete URL
                setTimeout(function () {
                    window.location.href = url;
                }, 3000);  // 3000 = 3 seconds
            });
        });
    });
</script>


{% endblock %}