{% extends "base.html" %}
{% load static %}
{% block title %}Garment Management{% endblock %}

{% block extra_css %}
    <link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-1 justify-content-between">
    <div class="breadcrumb-title pe-3">Garment Management</div>
    <a href="{% url 'garment-create' %}" class="btn btn-success ms-auto">Add Garment</a>
</div>

<div class="row">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="garment_management" class="table table-striped table-bordered table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Category</th>
                            {% comment %} <th>Type</th> {% endcomment %}
                            <th>Status</th>
                            <th>Description</th>
                            <th>Service/Price</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for garment in garments %}
                        <tr>
                            <td>{{ garment.name }}</td>
                            <td>{% if garment.category %}{{ garment.category.name }}{% else %}<span class="text-muted">-</span>{% endif %}</td>
                            {% comment %} <td>{{ garment.get_garment_type_display }}</td> {% endcomment %}
                            <td>
                                {% if garment.trash %}
                                    <span class="badge bg-danger">Trashed</span>
                                {% elif garment.status == 'active' %}
                                    <span class="badge bg-success">Active</span>
                                {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </td>
                            <td>{{ garment.description|striptags|truncatechars:80 }}</td>
                            <td>
                                {% if garment.service_prices %}
                                    {% for sp in garment.service_prices %}
                                        {% for service in services %}
                                            {% if service.id == sp.service_id %}
                                                <div>{{ service.service_name }}: <b>{{ sp.price }}</b></div>
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                {% else %}
                                    <span class="text-muted">No services</span>
                                {% endif %}
                            </td>
                            <td>{{ garment.created_at|date:"M d, Y H:i" }}</td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{% url 'garment-view' garment.id %}" class="btn btn-info btn-sm">View</a>
                                    <a href="{% url 'garment-edit' garment.id %}" class="btn btn-warning btn-sm">Edit</a>
                                    <form method="post" action="{% url 'garment-delete' garment.id %}" style="display:inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'assets/plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'assets/plugins/datatable/js/dataTables.bootstrap5.min.js' %}"></script>
    <script>
        $(document).ready(function() {
            $('#garment_management').DataTable();
        });
    </script>
{% endblock %}