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

{% block content %}

<style>
    /* =========================================================
       PETROGL STANDARD FORM
       ========================================================= */

    .petrogl-form-container {
        background-color: #dee2e6;
        border: none !important;
        box-shadow: none !important;
    }

    .petrogl-form-container .card-body {
        padding: 20px;
    }

    .petrogl-form-container .form-label {
        font-weight: 600;
        margin-bottom: 6px;
    }

    .petrogl-form-container .form-control,
    .petrogl-form-container .form-select {
        background-color: #ffffff;
        border: none !important;
        box-shadow: none !important;
    }

    .petrogl-form-container .form-control:focus,
    .petrogl-form-container .form-select:focus {
        border: none !important;
        box-shadow: 0 0 0 2px rgba(86, 99, 111, 0.12) !important;
    }

    /* =========================================================
       TABLE
       ========================================================= */

    .table-container {
        background-color: #dee2e6;
        border: none !important;
        box-shadow: none !important;
        padding: 10px;
    }

    #mappingTable {
        background-color: #ffffff;
        border: none !important;
        border-collapse: collapse !important;
        margin-bottom: 0;
    }

    #mappingTable thead {
        background-color: #56636f;
    }

    #mappingTable thead th {
        background-color: #56636f;
        color: #ffffff;
        font-weight: 600;
        border: none !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    #mappingTable tbody td {
        background-color: #ffffff;
        border-top: none !important;
        border-right: none !important;
        border-bottom: 1px solid #eef0f2 !important;
        border-left: 1px solid #eef0f2 !important;
        vertical-align: middle;
    }

    #mappingTable tbody td:first-child {
        border-left: none !important;
    }

    #mappingTable tbody tr:last-child td {
        border-bottom: none !important;
    }

    #mappingTable tbody tr:hover td {
        background-color: #f8f9fa;
    }

    #mappingTable .form-select {
        background-color: #ffffff;
        border: none !important;
        box-shadow: none !important;
    }

    #mappingTable .form-select:focus {
        border: none !important;
        box-shadow: 0 0 0 2px rgba(86, 99, 111, 0.12) !important;
    }

    /* =========================================================
       PAGINATION
       ========================================================= */

    .pagination {
        margin-bottom: 0;
    }

    .pagination .page-link {
        border: none !important;
        color: #56636f;
        background-color: #ffffff;
    }

    .pagination .page-item.active .page-link {
        background-color: #56636f;
        color: #ffffff;
    }

    .pagination .page-item.disabled .page-link {
        color: #adb5bd;
        background-color: #f8f9fa;
    }

    .pagination .page-link:hover {
        background-color: #eef0f2;
        color: #343a40;
    }

    /* =========================================================
       RESULT TEXT
       ========================================================= */

    .result-count {
        font-size: 14px;
    }
</style>


<div class="container-fluid">

    <!-- =====================================================
         HEADER
         ===================================================== -->

    <div class="d-flex justify-content-between align-items-center mb-3">

        <h3 class="mb-0">
            Material Account Mapping
        </h3>

    </div>


    <!-- =====================================================
         MESSAGES
         ===================================================== -->

    {% if messages %}

        {% for message in messages %}

            <div class="alert alert-warning alert-dismissible fade show"
                 role="alert">

                {{ message }}

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="alert">
                </button>

            </div>

        {% endfor %}

    {% endif %}


    <!-- =====================================================
         FILTER
         ===================================================== -->

    <div class="card petrogl-form-container mb-3">

        <div class="card-body">

            <form method="GET">

                <div class="row g-3 align-items-end">

                    <!-- CLASSIFICA -->

                    <div class="col-md-3">

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

                        <select
                            name="classifica"
                            class="form-select">

                            <option value="">
                                -- All Classifica --
                            </option>

                            {% for item in classificas %}

                                <option
                                    value="{{ item }}"
                                    {% if classifica == item %}
                                        selected
                                    {% endif %}
                                >
                                    {{ item }}
                                </option>

                            {% endfor %}

                        </select>

                    </div>


                    <!-- CATEGORY -->

                    <div class="col-md-4">

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

                        <select
                            name="category"
                            class="form-select">

                            <option value="">
                                -- All Category --
                            </option>

                            {% for item in categories %}

                                <option
                                    value="{{ item }}"
                                    {% if category == item %}
                                        selected
                                    {% endif %}
                                >
                                    {{ item }}
                                </option>

                            {% endfor %}

                        </select>

                    </div>


                    <!-- SEARCH -->

                    <div class="col-md-4">

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

                        <input
                            type="text"
                            name="search"
                            class="form-control"
                            placeholder="Search KIMAP or Material Name..."
                            value="{{ search }}"
                        >

                    </div>


                    <!-- SEARCH BUTTON -->

                    <div class="col-md-1">

                        <button
                            type="submit"
                            class="btn btn-secondary w-100">

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

                        </button>

                    </div>


                    <!-- CLEAR FILTER -->

                    {% if search or classifica or category %}

                        <div class="col-12">

                            <a
                                href="{% url 'material_account_mapping' %}"
                                class="btn btn-outline-secondary">

                                <i class="bi bi-x-circle"></i>
                                Clear Filter

                            </a>

                        </div>

                    {% endif %}

                </div>

            </form>

        </div>

    </div>


    <!-- =====================================================
         BULK ACCOUNT
         ===================================================== -->

    <div class="card petrogl-form-container mb-3">

        <div class="card-body">

            <div class="row g-3 align-items-end">

                <div class="col-md-5">

                    <label class="form-label">
                        Apply Account to Visible Items
                    </label>

                    <select
                        id="bulkAccount"
                        class="form-select">

                        <option value="">
                            -- Select Account --
                        </option>

                        {% for account in accounts %}

                            <option value="{{ account.acct_no }}">
                                {{ account.acct_no }}
                                -
                                {{ account.acct_name }}
                            </option>

                        {% endfor %}

                    </select>

                </div>


                <div class="col-md-auto">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        onclick="applyAccountToVisibleItems()">

                        <i class="bi bi-check2-all"></i>
                        Apply to Visible Items

                    </button>

                </div>


                <div class="col-md-auto">

                    <span class="text-muted result-count">

                        {{ page_obj.paginator.count }}
                        item(s) found

                    </span>

                </div>

            </div>

        </div>

    </div>


    <!-- =====================================================
         MAPPING FORM
         ===================================================== -->

    <form
        method="POST"
        action="{% url 'save_material_account_mapping' %}"
        id="mappingForm">

        {% csrf_token %}


        <div class="card table-container">

            <div class="card-body p-0">

                <div class="table-responsive">

                    <table
                        class="table align-middle"
                        id="mappingTable">

                        <thead>

                            <tr>

                                <th style="width: 8%;">
                                    Classifica
                                </th>

                                <th style="width: 13%;">
                                    KIMAP
                                </th>

                                <th style="width: 30%;">
                                    Material Name
                                </th>

                                <th style="width: 25%;">
                                    Category
                                </th>

                                <th style="width: 8%;">
                                    UOM
                                </th>

                                <th style="width: 16%;">
                                    Account No
                                </th>

                            </tr>

                        </thead>


                        <tbody>

                            {% for material in materials %}

                                <tr class="material-row">

                                    <input
                                        type="hidden"
                                        name="material_id"
                                        value="{{ material.id }}"
                                    >

                                    <td>
                                        {{ material.classifica }}
                                    </td>

                                    <td>
                                        <strong>
                                            {{ material.kimap }}
                                        </strong>
                                    </td>

                                    <td>
                                        {{ material.name }}
                                    </td>

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

                                    <td>
                                        {{ material.uom }}
                                    </td>

                                    <td>

                                        <select
                                            name="acct_no_{{ material.id }}"
                                            class="form-select form-select-sm account-select">

                                            <option value="">
                                                -- Select Account --
                                            </option>

                                            {% for account in accounts %}

                                                <option
                                                    value="{{ account.acct_no }}"
                                                    {% if material.acct_no == account.acct_no %}
                                                        selected
                                                    {% endif %}
                                                >
                                                    {{ account.acct_no }}
                                                    -
                                                    {{ account.acct_name }}
                                                </option>

                                            {% endfor %}

                                        </select>

                                    </td>

                                </tr>

                            {% empty %}

                                <tr>

                                    <td
                                        colspan="6"
                                        class="text-center text-muted py-4">

                                        No material data found.

                                    </td>

                                </tr>

                            {% endfor %}

                        </tbody>

                    </table>

                </div>


                <!-- =================================================
                     PAGINATION
                     ================================================= -->

                {% if page_obj.paginator.num_pages > 1 %}

                    <div class="d-flex justify-content-between align-items-center mt-3">

                        <div class="text-muted">

                            Showing
                            {{ page_obj.start_index }}
                            -
                            {{ page_obj.end_index }}
                            of
                            {{ page_obj.paginator.count }}
                            materials

                        </div>


                        <nav aria-label="Material pagination">

                            <ul class="pagination mb-0">

                                <!-- PREVIOUS -->

                                {% if page_obj.has_previous %}

                                    <li class="page-item">

                                        <a
                                            class="page-link"
                                            href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search|urlencode }}{% endif %}{% if classifica %}&classifica={{ classifica|urlencode }}{% endif %}{% if category %}&category={{ category|urlencode }}{% endif %}"
                                        >
                                            Previous
                                        </a>

                                    </li>

                                {% else %}

                                    <li class="page-item disabled">

                                        <span class="page-link">
                                            Previous
                                        </span>

                                    </li>

                                {% endif %}


                                <!-- PAGE NUMBERS -->

                                {% for num in page_obj.paginator.page_range %}

                                    {% if num == page_obj.number %}

                                        <li class="page-item active">

                                            <span class="page-link">
                                                {{ num }}
                                            </span>

                                        </li>

                                    {% else %}

                                        <li class="page-item">

                                            <a
                                                class="page-link"
                                                href="?page={{ num }}{% if search %}&search={{ search|urlencode }}{% endif %}{% if classifica %}&classifica={{ classifica|urlencode }}{% endif %}{% if category %}&category={{ category|urlencode }}{% endif %}"
                                            >
                                                {{ num }}
                                            </a>

                                        </li>

                                    {% endif %}

                                {% endfor %}


                                <!-- NEXT -->

                                {% if page_obj.has_next %}

                                    <li class="page-item">

                                        <a
                                            class="page-link"
                                            href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search|urlencode }}{% endif %}{% if classifica %}&classifica={{ classifica|urlencode }}{% endif %}{% if category %}&category={{ category|urlencode }}{% endif %}"
                                        >
                                            Next
                                        </a>

                                    </li>

                                {% else %}

                                    <li class="page-item disabled">

                                        <span class="page-link">
                                            Next
                                        </span>

                                    </li>

                                {% endif %}

                            </ul>

                        </nav>

                    </div>

                {% endif %}


                <!-- =================================================
                     SAVE
                     ================================================= -->

                <div class="d-flex justify-content-end mt-3">

                    <button
                        type="submit"
                        class="btn btn-secondary">

                        <i class="bi bi-save"></i>
                        Save All Mapping

                    </button>

                </div>

            </div>

        </div>

    </form>

</div>


<script>

function applyAccountToVisibleItems() {

    const bulkAccount =
        document.getElementById('bulkAccount');

    const accountValue =
        bulkAccount.value;

    if (!accountValue) {

        alert('Please select an Account first.');

        return;
    }


    const rows =
        document.querySelectorAll(
            '#mappingTable tbody tr.material-row'
        );


    if (rows.length === 0) {

        alert('No visible items to update.');

        return;
    }


    if (
        !confirm(
            'Apply the selected Account to all visible items?'
        )
    ) {

        return;
    }


    rows.forEach(function(row) {

        const select =
            row.querySelector('.account-select');

        if (select) {

            select.value = accountValue;

        }

    });

}

</script>

{% endblock %}