{% extends "scm/base.html" %}

{% block content %}

<style>
    /* ============================================================
       SAME STYLE AS VENDOR
    ============================================================ */

    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
        color: white;
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
        width: 100%;
    }

    .table {
        width: 100%;
        table-layout: auto;
    }

    /* Button Edit */
    .btn-secondary {
        background-color: rgb(80, 90, 97);
        border-color: rgb(80, 90, 97);
        color: white;
    }

    .btn-secondary:hover {
        background-color: rgb(70, 80, 87);
        border-color: rgb(70, 80, 87);
        color: white;
    }
</style>

<div class="container-fluid">

```
<!-- HEADER -->
<!-- <div class="d-flex justify-content-between align-items-center"
     style="padding: 1rem;">

    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">
        Master Category
    </h2>

    <button
        type="button"
        class="btn btn-secondary"
        onclick="showCategoryForm()">
        <i class="bi bi-plus-circle"></i>
        Add Category
    </button>

</div> -->

<div class="d-flex justify-content-between align-items-center"
     style="padding: 1rem;">

    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">
        Master Category
    </h2>

    <div>
        <!-- ADD CATEGORY -->
        <button
            type="button"
            class="btn btn-secondary"
            onclick="showCategoryForm()">
            <i class="bi bi-plus-circle"></i>
            Add Category
        </button>

        <!-- EXPORT EXCEL -->
        <a href="{% url 'export_to_excel_category' %}"
           class="btn btn-secondary">
            <i class="bi bi-file-earmark-excel"></i>
            Export to Excel
        </a>
    </div>

</div>
<!-- MESSAGES -->
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            {{ message }}
        </div>
    {% endfor %}
{% endif %}


<!-- FORM -->
<div id="categoryForm"
     class="card mb-4"
     style="{% if edit_category %}display:block;{% else %}display:none;{% endif %}">

    <div class="card-header">
        {% if edit_category %}
            Edit Category
        {% else %}
            Add Category
        {% endif %}
    </div>

    <div class="card-body">

        <form method="post"
              action="{% url 'save_category' %}">

            {% csrf_token %}

            {% if edit_category %}
                <input type="hidden"
                       name="category_id"
                       value="{{ edit_category.id }}">
            {% endif %}

            <div class="mb-3">

                <label class="form-label">
                    Category
                </label>

                <input
                    type="text"
                    name="category"
                    class="form-control"
                    value="{% if edit_category %}{{ edit_category.category }}{% endif %}"
                    required
                    autofocus>

            </div>


            <button type="submit"
                    class="btn btn-success">
                <i class="bi bi-save"></i>
                Save
            </button>

            <button type="button"
                    class="btn btn-secondary"
                    onclick="hideCategoryForm()">
                Cancel
            </button>

        </form>

    </div>
</div>


<!-- CATEGORY LIST -->
<div class="table-container">

    <table class="table table-striped table-hover"
           id="categoryTable">

        <thead class="table-dark">

            <tr>
                <th scope="col"
                    class="align-middle"
                    style="width:80px;">
                    No.
                </th>

                <th scope="col"
                    class="align-middle">
                    Category
                </th>

                <th scope="col"
                    class="align-middle"
                    style="width:150px;">
                    Actions
                </th>
            </tr>

        </thead>


        <tbody>

            {% for item in categories %}

            <tr>

                <td>
                    {{ forloop.counter }}
                </td>

                <td>
                    {{ item.category }}
                </td>

                <td>

                    <div class="d-flex gap-1">

                        <!-- EDIT -->
                        <a href="{% url 'edit_category' item.id %}"
                           class="btn btn-sm btn-secondary"
                           title="Edit">

                            <i class="bi bi-pencil-square"></i>

                        </a>


                        <!-- DELETE -->
                        <form method="post"
                              action="{% url 'delete_category' item.id %}"
                              style="display:inline;"
                              onsubmit="return confirm('Delete this category?');">

                            {% csrf_token %}

                            <button type="submit"
                                    class="btn btn-sm btn-danger"
                                    title="Delete">

                                <i class="bi bi-trash"></i>

                            </button>

                        </form>

                    </div>

                </td>

            </tr>

            {% empty %}

            <tr>

                <td colspan="3"
                    class="text-center">

                    No category data.

                </td>

            </tr>

            {% endfor %}

        </tbody>

    </table>

</div>
```

</div>

<script>

function showCategoryForm() {
    document.getElementById('categoryForm').style.display = 'block';
}

function hideCategoryForm() {
    document.getElementById('categoryForm').style.display = 'none';
}

</script>

{% endblock %}