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

{% block content %}
{% load custom_filters %}

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

    .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;
    }

    .pagination-page-btn {
        background-color: #ffffff !important;
        border: 1px solid #6c757d !important;
        color: #495057 !important;
    }

    .pagination-page-btn:hover,
    .pagination-page-btn:focus {
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        color: #343a40 !important;
    }

    .pagination-page-btn:disabled {
        background-color: #ffffff !important;
        border-color: #6c757d !important;
        color: #6c757d !important;
        opacity: 0.65;
    }

    .pagination-current {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-go {
        background-color: rgb(80, 90, 97) !important;
        border: 1px solid rgb(80, 90, 97) !important;
        color: #ffffff !important;
    }

    .pagination-go:hover,
    .pagination-go:focus {
        background-color: rgb(70, 80, 87) !important;
        border-color: rgb(70, 80, 87) !important;
        color: #ffffff !important;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">KMK Rate</h2>

    <form method="GET" class="m-0">
        <input type="text" name="search" value="{{ search_query }}" class="form-control"
            placeholder="Search KMK Rate..." style="max-width: 300px; margin-right: 1rem;">
    </form>

    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#kmkrateModal"
            onclick="resetForm()">
            Add KMK Rate
        </button>
        <a href="{% url 'generate_pdf_kmkrate' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_kmkrate' %}" class="btn btn-secondary">Export to Excel</a>
    </div>
</div>

{% if page_obj.paginator.num_pages > 1 %}
<div class="d-flex justify-content-between align-items-center mt-2 mb-2" style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
            href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            First
        </a>

        {% if page_obj.has_previous %}
        <a class="btn btn-sm pagination-page-btn"
            href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Previous
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Previous
        </button>
        {% endif %}

        <span class="btn btn-sm pagination-current">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
        <a class="btn btn-sm pagination-page-btn"
            href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Next
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Next
        </button>
        {% endif %}

        <a class="btn btn-sm pagination-page-btn"
            href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Last
        </a>

        <span class="ms-2 small text-muted">
            Go to Page
        </span>

        <form method="GET" class="d-flex align-items-center gap-1 m-0">
            {% if search_query %}
            <input type="hidden" name="search" value="{{ search_query }}">
            {% endif %}

            <input type="number" name="page" min="1" max="{{ page_obj.paginator.num_pages }}"
                class="form-control form-control-sm" style="width: 70px;" required>

            <button type="submit" class="btn btn-sm pagination-go">
                Go
            </button>
        </form>
    </div>
</div>
{% endif %}

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="kmkrateTable">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Currency</th>
                <th scope="col">Effective Date</th>
                <th scope="col">Until Date</th>
                <th scope="col">Rate</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if kmkrate %}
            {% for kmkrate_no in kmkrate %}
            <tr data-id="{{ kmkrate_no.id }}" data-currsign="{{ kmkrate_no.currsign.currsign }}"
                data-effectdate="{{ kmkrate_no.effectdate|date:'Y-m-d' }}"
                data-untildate="{{ kmkrate_no.untildate|date:'Y-m-d' }}" data-rate="{{ kmkrate_no.rate }}">

                <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
                <td>{{ kmkrate_no.currsign }}</td>
                <td>{{ kmkrate_no.effectdate|date:"d-m-Y" }}</td>
                <td>{{ kmkrate_no.untildate|date:"d-m-Y" }}</td>
                <td>{{ kmkrate_no.rate|format_currency_dynamic:kmkrate_no.currsign.currsign }}</td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary"
                            onclick="editRate('{{ kmkrate_no.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_kmkrate' kmkrate_no.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this KMK Rate ?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No KMK Rate found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

{% if page_obj.paginator.num_pages > 1 %}
<div class="d-flex justify-content-between align-items-center mt-2 mb-2" style="padding: 0 1rem;">

    <div>
        <small class="text-muted">
            Showing {{ page_obj.start_index }} - {{ page_obj.end_index }}
            of {{ page_obj.paginator.count }}
        </small>
    </div>

    <div class="d-flex align-items-center gap-1">

        <a class="btn btn-sm pagination-page-btn"
            href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            First
        </a>

        {% if page_obj.has_previous %}
        <a class="btn btn-sm pagination-page-btn"
            href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Previous
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Previous
        </button>
        {% endif %}

        <span class="btn btn-sm pagination-current">
            {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
        <a class="btn btn-sm pagination-page-btn"
            href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Next
        </a>
        {% else %}
        <button class="btn btn-sm pagination-page-btn" disabled>
            Next
        </button>
        {% endif %}

        <a class="btn btn-sm pagination-page-btn"
            href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">
            Last
        </a>

        <span class="ms-2 small text-muted">
            Go to Page
        </span>

        <form method="GET" class="d-flex align-items-center gap-1 m-0">
            {% if search_query %}
            <input type="hidden" name="search" value="{{ search_query }}">
            {% endif %}

            <input type="number" name="page" min="1" max="{{ page_obj.paginator.num_pages }}"
                class="form-control form-control-sm" style="width: 70px;" required>

            <button type="submit" class="btn btn-sm pagination-go">
                Go
            </button>
        </form>
    </div>
</div>
{% endif %}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const rateInput = document.querySelector("#rate");

        if (rateInput) {
            rateInput.addEventListener("input", function (e) {
                let value = e.target.value.replace(/,/g, "");
                if (!isNaN(value) && value !== "") {
                    e.target.value = Number(value).toLocaleString("en-US");
                } else {
                    e.target.value = "";
                }
            });

            document.getElementById("kmkrateForm").addEventListener("submit", function () {
                ["effectdate", "untildate"].forEach(function (id) {
                    const input = document.getElementById(id);

                    if (input.value) {
                        const [day, month, year] = input.value.split("-");
                        input.value = `${year}-${month}-${day}`;
                    }
                });
            });

            const form = rateInput.closest("form");
            if (form) {
                form.addEventListener("submit", function () {
                    rateInput.value = rateInput.value.replace(/,/g, "");
                });
            }
        }
    });
</script>

<script>
    function editRate(kmkrateId) {
        document.getElementById('kmkrateModalLabel').innerText = 'Edit Rate';
        document.getElementById('kmkrateForm').action = "{% url 'edit_kmkrate' 0 %}".replace('0', kmkrateId);

        const row = document.querySelector(`tr[data-id="${kmkrateId}"]`);
        if (row) {
            document.getElementById('currsign').value = row.dataset.currsign;
            document.getElementById('effectdate')._flatpickr.setDate(row.dataset.effectdate, true);
            document.getElementById('untildate')._flatpickr.setDate(row.dataset.untildate, true);
            document.getElementById('rate').value = row.dataset.rate;
        }

        const kmkrateModal = new bootstrap.Modal(document.getElementById('kmkrateModal'));
        kmkrateModal.show();
    }
</script>

<!-- CC Modal -->
<div class="modal fade" id="kmkrateModal" tabindex="-1" aria-labelledby="kmkrateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="kmkrateModalLabel">Add KMK Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="kmkrateForm" method="POST" action="{% url 'save_kmkrate' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="currsign" class="form-label">Currency</label>
                        <select class="form-control" id="currsign" name="currsign" required>
                            <option value="">-- Select Currency --</option>
                            {% for curr in matauangs %}
                            <option value="{{ curr.currsign }}">{{ curr.currsign }} - {{ curr.currname }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="effectdate" class="form-label">Effective Date</label>
                        <input type="text" class="form-control date-input" id="effectdate" name="effectdate"
                            placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off" required>
                    </div>

                    <div class="mb-3">
                        <label for="untildate" class="form-label">Until Date</label>
                        <input type="text" class="form-control date-input" id="untildate" name="untildate"
                            placeholder="DD-MM-YYYY" maxlength="10" autocomplete="off" required>
                    </div>
                    <div class="mb-3">
                        <label for="rate" class="form-label">Rate</label>
                        <input type="text" id="rate" name="rate" class="form-control" required>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        flatpickr(".date-input", {
            dateFormat: "d-m-Y",
            allowInput: true,
            locale: {
                firstDayOfWeek: 1
            }
        });
    });
</script>

{% endblock %}